Make WordPress Core

Opened 23 months ago

Closed 23 months ago

Last modified 22 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:


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 23 months ago.
47457.diff (325 bytes) - added by vaishalipanchal 23 months ago.
47457.2.diff (386 bytes) - added by chetan200891 23 months ago.
Created patch.

Download all attachments as: .zip

Change History (11)

23 months ago


#1 @vaishalipanchal
23 months ago

  • Keywords has-patch added; needs-patch removed

23 months ago

Created patch.

#2 @afercia
23 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.

23 months ago

#4 @afercia
23 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
23 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.

22 months ago

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

22 months ago

#8 @SergeyBiryukov
22 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 22 months ago by SergeyBiryukov (previous) (diff)
Note: See TracTickets for help on using tickets.