Title: making mediaelement.js responsive
Last modified: August 21, 2016

---

# making mediaelement.js responsive

 *  Resolved [kevinhaig](https://wordpress.org/support/users/kevinhaig/)
 * (@kevinhaig)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/making-mediaelementjs-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)

1 [2](https://wordpress.org/support/topic/making-mediaelementjs-responsive/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/making-mediaelementjs-responsive/page/2/?output_format=md)

 *  [twakspot](https://wordpress.org/support/users/twakspot/)
 * (@twakspot)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752927)
 * Same problem here, but it was not solved for me by adding the -1.
 *  Thread Starter [kevinhaig](https://wordpress.org/support/users/kevinhaig/)
 * (@kevinhaig)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752928)
 * Take a look [here](http://demo2.kevinsspace.ca/blog/page/3/) and you can see 
   that it is working for me.
 * Perhaps the plugin was changed by the author?
 * Contact me through [kevinsspace.ca](http://kevinsspace.ca) and I can send you
   my modified plugin.
 *  [twakspot](https://wordpress.org/support/users/twakspot/)
 * (@twakspot)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752929)
 * 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](http://tactosound.com)
 * I’ll get in touch with you for your modded plug. thanks!
 *  [twakspot](https://wordpress.org/support/users/twakspot/)
 * (@twakspot)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752930)
 * correction, the -1 fix is working for me. cache issue. cheers!
 *  [Dingbert](https://wordpress.org/support/users/dingbert/)
 * (@dingbert)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752931)
 * 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…
 *  [Dingbert](https://wordpress.org/support/users/dingbert/)
 * (@dingbert)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752932)
 * Whom to contact regarding this issue? This should be fixed in the WordPress core!
 *  Moderator [Ipstenu (Mika Epstein)](https://wordpress.org/support/users/ipstenu/)
 * (@ipstenu)
 * 🏳️‍🌈 Advisor and Activist
 * [12 years, 10 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752933)
 * 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](http://core.trac.wordpress.org/search?q=mediaelement&noquickjump=1&ticket=on)
   to make sure there isn’t already a ticket on it.
 *  Thread Starter [kevinhaig](https://wordpress.org/support/users/kevinhaig/)
 * (@kevinhaig)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752934)
 * 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.
 *  [WayneM1](https://wordpress.org/support/users/waynem1/)
 * (@waynem1)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752935)
 * I’m seeing issues with the volume bar breaking as well…
 *  [GratuiTous](https://wordpress.org/support/users/beatstruggles/)
 * (@beatstruggles)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752939)
 * 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 !
 *  Thread Starter [kevinhaig](https://wordpress.org/support/users/kevinhaig/)
 * (@kevinhaig)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752940)
 * 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](https://wordpress.org/support/users/beatstruggles/)
 * (@beatstruggles)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752941)
 * Great, thank-you for sharing Kevin!
 *  [tbo460](https://wordpress.org/support/users/thibotus01/)
 * (@thibotus01)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752942)
 * Here how it looks before the trick:
    [http://img69.imageshack.us/img69/644/u6sr.png](http://img69.imageshack.us/img69/644/u6sr.png)
 * Here after:
    [http://img850.imageshack.us/img850/1091/7oqz.png](http://img850.imageshack.us/img850/1091/7oqz.png)
 * Looks like the bar is continuing after the volume…
 *  [Justin Tadlock](https://wordpress.org/support/users/greenshady/)
 * (@greenshady)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752944)
 * 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/341)
   [https://github.com/johndyer/mediaelement/issues/697](https://github.com/johndyer/mediaelement/issues/697)
   [https://github.com/johndyer/mediaelement/issues/899](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;
       }
       ```
   
 *  [snellpacha](https://wordpress.org/support/users/tartatin/)
 * (@tartatin)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/#post-3752947)
 * Nice trick, thanks !

Viewing 15 replies - 1 through 15 (of 18 total)

1 [2](https://wordpress.org/support/topic/making-mediaelementjs-responsive/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/making-mediaelementjs-responsive/page/2/?output_format=md)

The topic ‘making mediaelement.js responsive’ is closed to new replies.

## Tags

 * [MediaElement.js](https://wordpress.org/support/topic-tag/mediaelement-js/)

 * In: [Alpha/Beta/RC](https://wordpress.org/support/forum/alphabeta/)
 * 18 replies
 * 11 participants
 * Last reply from: [simsalabim](https://wordpress.org/support/users/simsalabim/)
 * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/making-mediaelementjs-responsive/page/2/#post-3752959)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics