Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#47457 closed defect (bug) (fixed)

Fix the mediaelements player controls bar sizing

Reported by: afercia's profile afercia Owned by: afercia's profile 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 5 years ago.
47457.diff (325 bytes) - added by vaishalipanchal 5 years ago.
47457.2.diff (386 bytes) - added by chetan200891 5 years ago.
Created patch.

Download all attachments as: .zip

Change History (11)

5 years ago


#1 @vaishalipanchal
5 years ago

  • Keywords has-patch added; needs-patch removed

5 years ago

Created patch.

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

5 years ago

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

5 years ago

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

5 years ago

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