WordPress.org

Ready to get started?Download WordPress

Forums

Make the WP 3.6 Media Player responsive (15 posts)

  1. Tevya
    Member
    Posted 9 months ago #

    I'm using it in a highly-responsive theme, but apparently the new media player included in 3.6 is not responsive. It should be responsive by default.

  2. esmi
    Forum Moderator
    Posted 9 months ago #

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

  3. Tevya
    Member
    Posted 9 months ago #

    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;
    }
  4. Andrew
    Forum Moderator
    Posted 9 months ago #

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

  5. esmi
    Forum Moderator
    Posted 9 months ago #

    I don't have time to do that.

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

  6. Tevya
    Member
    Posted 9 months ago #

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

  7. EOSlover
    Member
    Posted 9 months ago #

    I can confirm the problem.

  8. johanbenjaminsson
    Member
    Posted 7 months ago #

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

  9. ishmaeldaro
    Member
    Posted 5 months ago #

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

  10. Dan Knauss
    Member
    Posted 3 months ago #

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

  11. Tevya
    Member
    Posted 3 months ago #

    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.

  12. Dan Knauss
    Member
    Posted 3 months ago #

    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.

  13. Tevya
    Member
    Posted 2 months ago #

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

  14. Dan Knauss
    Member
    Posted 2 months ago #

    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.

  15. Tevya
    Member
    Posted 2 months ago #

    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.

Reply

You must log in to post.

About this Topic

Tags

No tags yet.