[resolved] making mediaelement.js responsive (19 posts)

  1. kevinhaig
    Posted 3 years ago #

    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.

  2. twakspot
    Posted 2 years ago #

    Same problem here, but it was not solved for me by adding the -1.

  3. kevinhaig
    Posted 2 years ago #

    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.

  4. twakspot
    Posted 2 years ago #

    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!

  5. twakspot
    Posted 2 years ago #

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

  6. Dingbert
    Posted 2 years ago #

    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

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


    and change it to

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

  7. Dingbert
    Posted 2 years ago #

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

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

  9. kevinhaig
    Posted 2 years ago #

    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.

  10. WayneM1
    Posted 2 years ago #

    I'm seeing issues with the volume bar breaking as well...

  11. GratuiTous
    Posted 2 years ago #

    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.


    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 !

  12. kevinhaig
    Posted 2 years ago #

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

  13. GratuiTous
    Posted 2 years ago #

    Great, thank-you for sharing Kevin!

  14. thibotus01
    Posted 2 years ago #

    Here how it looks before the trick:

    Here after:

    Looks like the bar is continuing after the volume...

  15. Justin Tadlock
    WordPress God
    Posted 2 years ago #

    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.

    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;
  16. snellpacha
    Posted 2 years ago #

    Nice trick, thanks !

  17. Shmoo
    Posted 2 years ago #

    Hello guys,

    Just curious, how can I deregister the stylesheets of this media component?
    I like the JS stuff just wanna stop-/block the stylesheets

    Those two please:

    I would like to include those styles inside my theme's styles.css and customize them a little bit.

    I don't like 18KB Jony Ive gradients in my theme :P

  18. Shmoo
    Posted 2 years ago #

    Got it..

    Already had this piece of code in my functions.php

    function shmoo_scripts() {
    	wp_enqueue_style( 'shmoo-style', get_stylesheet_uri() );
    	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
    		wp_enqueue_script( 'comment-reply' );
    add_action( 'wp_enqueue_scripts', 'shmoo_scripts' );

    So I added this line of code against it.

    wp_deregister_style( 'mediaelement' ); // Deregister 'mediaelement' stylesheets.

    Just after the line: wp_enqueue_style(.....

    Hope that helps.

  19. simsalabim
    Posted 2 years ago #

    I am using 3.8 and still got the issue. Though I think I based my theme on Twentytvelve not Twentythirteen.

    I think it would be great if the WordPress team could also fix the issue in Twentytvelve and eleven as for certain circumstances those themes still come in handy.

    As kevinhaig mentioned:

    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.


Topic Closed

This topic has been closed to new replies.

About this Topic