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

[leandroprz]

Hi,

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.

[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?

Embed: ​http://snag.gy/wWwoi.jpg
Full-screen: ​http://snag.gy/oKxbJ.jpg

[leandroprz]

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?

Embed: ​http://snag.gy/wWwoi.jpg
Full-screen: ​http://snag.gy/oKxbJ.jpg

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

[thomasplevy]

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.

[caseypatrickdriscoll]

Hello!

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. ​https://github.com/johndyer/mediaelement

Otherwise, I'm able to reproduce the problem by uploading a flv file in 3.8.1
​http://www.mediacollege.com/video-gallery/testclips/barsandtone.flv

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
​http://imgur.com/a/wnw1J

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 FlashMediaElement.as file on lines 153 and 154
​https://github.com/johndyer/mediaelement/blob/master/src/flash/FlashMediaElement.as#L153

_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.

[caseypatrickdriscoll]

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.

Edit: sorta changed my mind on this on further review. The file wp-includes/js/mediaelement/wp-mediaelement.css does contain the four default color lines.

.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;
}

These defaults are an awkward orange over blue and we should just change them to be white over blue.

If I were to fix this issue right now I would just change

d54e21 to efefef and
21759b to 3cacc8

to match the flash player's colors (white over blue).

[wonderboymusic]

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.

[wonderboymusic]

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

[nacin]

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

[netweb]

Replying to nacin:

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

Removed