Making Self-Hosted HTML5 Video and Audio Players in WordPress 3.6 Responsive

At the time of posting this, WordPress has just released 3.6-beta1. One of the new features that caught my eye was that users can finally insert self-hosted video and audio files into their posts and pages without the need of any kind of 3rd-party plugin. This is a huge step forward for WordPress and I give major props to Mark Jaquith and the team on this update.

WordPress has done by implementing the awesome, open-source HTML5 players of by John Dwyer. This works with WordPress’s oEmbed. So in other words, you can simply put the URL to the audio or video file into your page or post (like you can with Vimeo and YouTube videos) and they’ll magically appear.

When I saw this new feature, my first question was, how am I going to allow this new default WordPress functionality work in my responsive themes? So, I played around with this for a little while, and here’s what I’ve come up with so far.

Screen Shot 2013-04-07 at 1.34.14 PM

Screen Shot 2013-04-07 at 1.35.55 PM

Please feel free to comment with any other suggestions or if I’ve gone wrong anywhere in this post.


Believe it or not, this was actually easier to figure out than the audio player. I played around with some different options until I realized the bold, new Twenty Thirteen theme already had the answer within its stylesheet.

Basically, you just need to style the <video> tag to have a max-width of 100%, and then the mediaelement.js player will do the rest.

video {
	max-width: 100%;

And if you want to target just the WordPress video player specifically you can do it like this:

.wp-video-shortcode {
	max-width: 100%;

… This might be better so that you’re styling doesn’t effect any other 3rd-party plugins the user might want to run that implements other HTML5 video players.


The audio player was a little more tricky. It appears the Twenty Thirteen doesn’t have an answer for this one, as the audio player does not scale responsively there.

Using the same approach of applying a 100% max-width to the <audio> tag doesn’t quite work with the mediaelement.js player. You get this weird side effect where different browsers interpret the height of the player differently.

Screen Shot 2013-04-07 at 1.31.40 PM

Digging through some tickets in the mediaplayer.js Github repo, I found that the best solution was to add width="100%" to the <audio> tag.

Looking at WordPress’s new audio shortcode, the best way to do this I could come up with is to just filter the final output like this:

function my_audio_shortcode( $html ){
	return str_replace('


7 comments on “Making Self-Hosted HTML5 Video and Audio Players in WordPress 3.6 Responsive

  1. Hi Jason,
    did you test responsive video with IE9? I use mediaelement.js plugin with WP 3.5.1 and there is a known bug … IE9 interprets 100% as 100px, so the video is displayed as small square 100 x 100px. However in IE8 it is OK, since it uses flash fallback.


    • Yup, seems to all work fine in IE9 on my end. Here’s a screenshot of what I’m seeing:

      But keep in mind that with the method I’m suggesting you’re NOT putting in a 100% width like you’re suggesting to do with the shortcode.

      Here’s what’s actually happening in WP 3.6 —

      1) The user puts simply the URL to the video into the post like:
      2) WP recognizes this with oEmbed and then passes it to the [video] shortcode automatically.
      3) There is no “width” specified in this scenario and so the output of the video tag has a width that matches the global $content_width of the current theme.

      … However with my method above, we’re styling the video tag to be max-width:100% from the theme’s stylesheet, and that’s what the mediaplayer.js script is using for its “responsive” trigger.

      See v2.9.3 on the mediaplayer.js github repo’s update log:

  2. Hey Jason,

    Thanks so much for the tip! Highly appreciated right now. Just wondering, do you know where I might change the loading and playing colors? They are orange (playing)/blue (loading) right now. I’ve been trying to figure this out for days and it’s driving me crazy.

    Any help would be much appreciated!

  3. Hi Jason,

    your solution for responsive audio and video works fine in IE, but there is a bug in Chrome and Firefox. Volume slider sometimes jumps below audio player and similarly fullscreen icon jumps below video player, as you change the page width.

    There is a problem in file wp-includes/js/mediaelement/mediaelement-and-player.js
    Here is a fix, that worked for me.


Comments are closed.