Make the WP 3.6 Media Player responsive

Can you replicate the issue using the default 2013 theme and no active plugins?

I don’t have time to do that. I believe I tested it at one point with TwentyTwelve and it was responsive. However, I don’t remember if I just put in the plain URL or if I used a shortcode with dimensions like in this instance. So I assume it’s just up to the theme to make it responsive, or not. Seems like it should be built-right in, and not require the theme to add additional CSS. But for all I know it is, and most themes just don’t play nicely with it.

I received some help with it on another set of forms and the following CSS made it fully responsive with the theme I’m using (Avada) for this site. In case it’s helpful to somebody else, here’s the CSS we added:

.mejs-container {
  width: 100% !important;
  height: auto !important;
  padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
  width: 100% !important;
  height: 100% !important;
}
.mejs-mediaelement video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
}
.mejs-container, .mejs-embed, .mejs-embed body {
background:transparent!important;
}

Some themes authors don’t want their theme to be responsive, what happens to them?

I don’t have time to do that.

Then it cannot be confirmed as an issue in WordPress core.

@andrew, if the theme isn’t responsive, it won’t matter if there’s CSS for the video player to be. That’s because the elements the video is contained in won’t resize, therefore the video will stay the same inside the space. So building-in responsive CSS to the player would have no effect on the situation you mention.

@esmi even if I did do it, it wouldn’t confirm anything actually. All that would prove is that Twenty Thirteen does or doesn’t include the CSS to make the player responsive. The issue that needs to be looked at is that the WP doesn’t include responsive CSS for the player natively. I’m fairly certain this is true, since I’ve now tried on several themes. However, as I just pointed out, this doesn’t completely confirm it, as it could just be that the themes tested conflict with the built-in CSS and haven’t been updated for WP 3.6 yet. However, it seems likely from what I’ve seen that the player is NOT responsive as implemented by WP, but Twenty Thirteen adds CSS to make it so.

If you (or whoever) has to have hard proof before you’ll look into potentially improving WP, well, then I guess I don’t have time for that. Sorry for trying to help out.

I can confirm the problem.

@tevya I think esmi is just trying to narrow down the problem.

And yes, i too have this issue. The css seems to be set with javascript on window resize event. When i play around with the css values in developer toolbar the values gets reset when changing browser size.

I was having the same problem with a responsive Canvas theme from Woothemes. The CSS Teyva provided works like a charm.

There are a lot of problems with the terrible styling in the core. Justin Tadlock rebuilt it all: https://github.com/justintadlock/theme-mediaelement

Good to hear someone as well known and respected as Justin support my position. Seems like its a big “hacked” into WP instead of baked in. Would be very nice to get it updated in core to use cleaner CSS and be easier to style.

The worst problem is that initially an old default style for the player is loaded, and then your new style kicks in after it. The causes a waste of resources and an unpleasant, confusing flash of the unwanted player style. (Justin’s code does not address this.) You can hide the flash, but I don’t know of a way to stop the old style from being loaded without hacking the core.

Supposedly 3.9 touches on some of this, though not sure if it completely fixes/updates this. Anyone tested enough to know yet?

Yes the 3.9 update fixed the godawful non-responsiveness.

Unfortunately there is still no way to stop the default style from being loaded (and visible briefly) before the WP core styling (or your own) kicks in.

I suppose the underlying markup for mediaelement is what needs to be addressed?

In a quick search I wasn’t able to locate any information on what exactly was changed and where; my guess is it’s all happening on the mediaelement.js end.

Well, I’m glad there’s some improvement. I’m also glad no mods have shut down this topic. Hopefully it, among other things, will keep attention on this until it’s properly fixed.