Make WordPress Core

Opened 8 months ago

Closed 8 months ago

Last modified 7 months ago

#47457 closed defect (bug) (fixed)

Fix the mediaelements player controls bar sizing

Reported by: afercia Owned by: afercia
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots good-first-bug has-patch commit
Focuses: ui Cc:
PR Number:


In the media views, the mediaelements player controls bar exceeds the width of the video. See attached screenshot.

This happens because the media views stylesheet switches everything to content-box sizing, while it appears the mediaelements player expects border-box.

This CSS rule in media-views.css:

.media-modal * {
    box-sizing: content-box;

conflicts with this CSS rule in mediaelementplayer-legacy.min.css:

.mejs-container * {
    box-sizing: border-box;

Explicitly setting box-sizing: border-box; with some higher specificity to the mediaplayer .mejs-controls element fixes the problem.

Attachments (3)

mediaelements player controls bar.png (349.5 KB) - added by afercia 8 months ago.
47457.diff (325 bytes) - added by vaishalipanchal 8 months ago.
47457.2.diff (386 bytes) - added by chetan200891 8 months ago.
Created patch.

Download all attachments as: .zip

Change History (11)

8 months ago


#1 @vaishalipanchal
8 months ago

  • Keywords has-patch added; needs-patch removed

8 months ago

Created patch.

#2 @afercia
8 months ago

  • Keywords commit added
  • Owner set to afercia
  • Status changed from new to assigned

@vaishalipanchal @chetan200891 thanks for your patches! 47457.2.diff seems a better approach to me, as it's better scoped to only target the player controls (we can't change box-sizing for all the elements in the media views).

This ticket was mentioned in Slack in #core by afercia. View the logs.

8 months ago

#4 @afercia
8 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 45497:

Fix the media player controls bar width in the media views.

Props vaishalipanchal, chetan200891.
Fixes #47457.

#5 @audrasjb
8 months ago

  • Milestone changed from 5.3 to 5.2.2

Let's try to add this one to 5.2.2 as it is self contained and already tested, patched, commited :-)

This ticket was mentioned in Slack in #core by mukeshpanchal27. View the logs.

7 months ago

This ticket was mentioned in Slack in #core by sergey. View the logs.

7 months ago

#8 @SergeyBiryukov
7 months ago

  • Milestone changed from 5.2.2 to 5.3

Moving back to 5.3, as 5.2.2 is out and this was not actually reopened for backporting to the branch, so it's only in trunk at the moment.

When moving tickets from the next major release to the next minor, please don't forget to reopen and add the fixed-major keyword.

Last edited 7 months ago by SergeyBiryukov (previous) (diff)
Note: See TracTickets for help on using tickets.