WordPress.org

Support

Support » Alpha/Beta » [Resolved] making mediaelement.js responsive

[Resolved] making mediaelement.js responsive

  • I am testing WordPress 3.6 Beta 3 and have been having difficulty making the media player responsive.

    I have added the following filter which does work.

    /**
     * filter audio shortcodes to add width="100%"
     * @link http://www.jasonbobich.com/wordpress/making-self-hosted-html5-video-and-audio-players-in-wordpress-3-6-responsive/
     */
    function ka_express_audio_shortcode( $html ){
    	return str_replace('<audio', '<audio width="100%"', $html);
    }
    add_filter('wp_audio_shortcode', 'ka_express_audio_shortcode');

    However there appears to be a bug in mediaelement.js. The css is breaking in responsive mode and the volume slide bar displays outside and below the player. When you change the screen size the volume slider pops into position and out of position repeatedly, suggesting a calculated and returned width issue, within the plugin.

    I’m a newbie when it comes to jQuery but this appears to be the fix…

    In mediaelement-and-player.js :

    Replace: b = this.controls.width() – a – (c.outerWidth(true) – c.width())
    with: b = this.controls.width() – a – (c.outerWidth(true) – c.width())-1

    What this does is always forces .mejs-time-rail width to be 1 px less than calculated so the css is never broken.

    Is there any chance of getting someone to look into this.

Viewing 15 replies - 1 through 15 (of 18 total)
  • Same problem here, but it was not solved for me by adding the -1.

    Take a look here and you can see that it is working for me.

    Perhaps the plugin was changed by the author?

    Contact me through kevinsspace.ca and I can send you my modified plugin.

    Hi Kevin,

    I was using the mediaelement plug for WP, but having just upgraded to WP 3.6 today, I removed the plug and changed all my links to use WP integration with mediaelement. That’s where I made the -1 change, and it didn’t work for me – you can see on the right side of my site: http://tactosound.com

    I’ll get in touch with you for your modded plug. thanks!

    correction, the -1 fix is working for me. cache issue. cheers!

    Hey! Thanks a ton for the tip! The volume slider still pops out when changing the width but pops back in the moment you stop moving the mouse.

    If anyone searches for it in WP 3.6 look in the file
    /wp-includes/js/mediaelement/mediaelement-and-player.min.js

    and the part you’re looking for has no spaces there (that’s why i didn’t find it right away 🙂 )

    b=this.controls.width()-a-(c.outerWidth(true)-c.width())

    and change it to
    b=this.controls.width()-a-(c.outerWidth(true)-c.width())-1

    as mentioned above by Kevin.
    Oh, and remember to clear the cache, like twakspot says…

    Whom to contact regarding this issue? This should be fixed in the WordPress core!

    This should be working in core. actually. They spent a lot of time with different browsers testing it.

    Check at http://core.trac.wordpress.org/search?q=mediaelement&noquickjump=1&ticket=on to make sure there isn’t already a ticket on it.

    Hi Mika
    It looks like the filter is no longer required but the mediaelement.js plugin still has the volume bar breaking the css on screen re-size.

    I’m seeing issues with the volume bar breaking as well…

    GratuiTous

    @beatstruggles

    Hi Kevin,

    Thank-you so much for this fix! — I found -1 was still breaking as Dingbert mentioned.

    I simply put it to -2, and therefore has stopped the breaking of the volume slider on the WordPress 3.6 Native audio player container.

    So do this.

    Public_html -> wp-includes -> js -> mediaelement -> mediaelement-and-player.min

    Hit CTRL + F and search for “b=this.controls.width”

    (It should be the only thing that is searched 1/1).

    As Kevin has now said, add that -1 at the end, however, I added -2 to stop the volume slider breakage upon zoom out.

    b=this.controls.width()-a-(c.outerWidth(true)-c.width())-2

    Clear Cache by hitting CTRL + SHIFT + R

    Thank-you so much Kevin.

    Also keep in mind, this is editing the core files.. so upon update, be aware you will need to add this code again!

    Riley !

    kevinhaig

    @kevinhaig

    You can actually de-register mediaelements.js in your functions file and register your modified mediaelements.js so that you won’t have to fix it everytime an update occurs.

    Here is the basic code to do this :

    function your_theme_load_js() {
       wp_deregister_script('mediaelement');
       wp_enqueue_script('mediaelement',get_template_directory_uri() .
       '/js/mediaelement-and-player-min.js', array( 'jquery' ), '' ,true);
    }
    add_action('wp_enqueue_scripts', 'your_theme_load_load_js');

    You will need to put the modified mediaelement.js in a /js/ folder in your themes directory.

    I’ve noticed the twentythirteen theme is not having the same problem and I’m investigating what the theme developer has done to avoid the problem.

    GratuiTous

    @beatstruggles

    Great, thank-you for sharing Kevin!

    thibotus01

    @thibotus01

    Here how it looks before the trick:
    http://img69.imageshack.us/img69/644/u6sr.png

    Here after:
    http://img850.imageshack.us/img850/1091/7oqz.png

    Looks like the bar is continuing after the volume…

    Justin Tadlock

    @greenshady

    WordPress God

    A lot of this depends on specific widths. Sometimes, the last media player control drops below the other controls; sometimes it doesn’t. It just depends on the width. It’s a known issue with Mediaelement.js and was first reported 2 years ago and more recently. There does seem to be a recent patch though.
    https://github.com/johndyer/mediaelement/issues/341
    https://github.com/johndyer/mediaelement/issues/697
    https://github.com/johndyer/mediaelement/issues/899

    I’ve been working on a pure CSS fix for this, which was not at all easy. But, the idea is to intentionally clear the last control, then reposition it. Because it sometimes drops down and doesn’t at other times (depending on the width), it’s best to reproduce the behavior for all widths and purposely clear it below the other controls and move it back where we want it.

    Here’s the CSS:

    /* Fix for last item dropping below the controls. */
    .mejs-controls > div:last-of-type {
    	position: relative;
    	clear: both;
    	float: right;
    	top:   -31px;
    }

    The -31 may need to be adjusted. I’m working with a custom media player skin at the moment and haven’t tested that with the default.

    You may also need to be more specific. If that’s the case, try something like this:

    /* Fix for last item dropping below the controls. */
    .mejs-container .mejs-controls > div:last-of-type {
    	position: relative;
    	clear: both;
    	float: right;
    	top:   -31px;
    }

    Nice trick, thanks !

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘[Resolved] making mediaelement.js responsive’ is closed to new replies.