Make WordPress Core

Opened 10 years ago

Last modified 4 years ago

#25076 assigned defect (bug)

CSS issue with native video player and flash fallback on full screen

Reported by: leandroprz's profile leandroprz Owned by: wonderboymusic's profile wonderboymusic
Milestone: Priority: normal
Severity: minor Version: 3.6
Component: Media Keywords: needs-patch
Focuses: Cc:



I noticed there's a bug with the CSS and the new native video player introduced in v3.6.

This is how it looks when not using full screen:

And this is how it looks when using full screen:

It automatically changes the color of the bar.

This is the shortcode I'm using to show the video:

[video src="video.mp4" width="640" height="360" autoplay="true" loop="true"]

I tested this on a fresh WP 3.6 installation with Twenty Thirteen theme. This is the CSS:

.mejs-container, .mejs-embed, .mejs-embed body {
	background: #464646;

.mejs-controls .mejs-time-rail .mejs-time-loaded {
	background: #21759b;

.mejs-controls .mejs-time-rail .mejs-time-current {
	background: #d54e21;

.me-cannotplay {
	width: auto !important;

I also tested it on a post and on a page, happens the same on both.

Change History (12)

#1 @SergeyBiryukov
10 years ago

  • Component changed from Embeds to Media

#2 @wonderboymusic
10 years ago

  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to 3.9

#3 follow-up: @spmlucas
10 years ago

  • Keywords reporter-feedback added

I'm not seeing any difference between the embedded version and the full screen version (using trunk and 2014 theme). Am I just blind, or is this no longer an issue?


#4 in reply to: ↑ 3 ; follow-up: @leandroprz
10 years ago

Replying to spmlucas:

I'm not seeing any difference between the embedded version and the full screen version (using trunk and 2014 theme). Am I just blind, or is this no longer an issue?


Are you sure you are testing it with Flash? I can still reproduce this bug on trunk v3.9 alpha and Twenty Fourteen theme.

Last edited 10 years ago by leandroprz (previous) (diff)

#5 in reply to: ↑ 4 @thomasplevy
10 years ago

I can reproduce this issue but I don't believe this can be resolved via CSS as the flash fallback displays a fullscreen flash player.

I believe the actual .swf file is controlling the styling of the player, not CSS. I'm not tremendously well versed in Flash -- but I think that's the essential issue.

#6 @caseypatrickdriscoll
10 years ago


I'm just getting started on WP Core and this is my first ticket. Here is what I have so far.

First off, is this even a WP issue? It seems to me that it is a bug for the mediaelement.js library, which should be fixed in their project and trickled down to us.

Otherwise, I'm able to reproduce the problem by uploading a flv file in 3.8.1

Here is a link with a gif of a mp4 and flv video, along with a screen cap of the full player html5 and flv players

Both embedded players seem to correctly display the green time-current (#24890d) over “white” time-loaded. Bizarrely that seems to be because the html5 player is used for both

Full screen however (as shown in the imgur link) the html5 player is still the correct green over white (second photo), but the flash player becomes an incorrect “white” over “blue” (third photo)

I believe these colors (white #efefef and blue #3CACC8) are created in the file on lines 153 and 154

_scrubBarColor = (params['scrubbarcolor'] != undefined) ? (String(params['scrubbarcolor'])) : "0xefefef";
_scrubLoadedColor = (params['scrubloadedcolor'] != undefined) ? (String(params['scrubloadedcolor'])) : "0x3CACC8";

I believe they are then compiled to the non-editable flashmediaelement.swf file which appears in /wp-includes/js/mediaelement/

At this point I’m not sure how to proceed, because of my unfamiliarity with Flash and ActionScript. My biggest concern would be that if we recompiled the file we would miss something important, which is why we should leave it to the mediaelement.js library to edit.

Last edited 10 years ago by SergeyBiryukov (previous) (diff)

This ticket was mentioned in IRC in #wordpress-dev by caseydriscoll. View the logs.

10 years ago

#8 @caseypatrickdriscoll
10 years ago

Actually, I just realized this may be a complete non issue.

It's the theme that controls the html5 player's color, so it will almost always be different from the flash player, which cannot be controlled by css.

Version 0, edited 10 years ago by caseypatrickdriscoll (next)

#9 @wonderboymusic
10 years ago

  • Keywords reporter-feedback removed

Fullscreen mode in most browsers when MEjs is using the Flash plugin is not reading the CSS at all, it is using the base styles baked into the flash instance. I think this is unfortunate, but probably expected, since there is no way to pass styles into the ActionScript.

#10 @wonderboymusic
10 years ago

  • Milestone changed from 3.9 to Future Release

There is possibly a way to pass pluginVars when initing a MediaElementPlayer, but we can look at this later

#11 follow-up: @nacin
9 years ago

  • Owner set to wonderboymusic
  • Status changed from new to assigned

Assigning this to wonderboymusic for eventual review (and to remove it from the good-first-bugs report).

#12 in reply to: ↑ 11 @netweb
8 years ago

  • Keywords good-first-bug removed

Replying to nacin:

.. and to remove it from the good-first-bugs report


Note: See TracTickets for help on using tickets.