Head back up.
Theme Blvd WordPress Themes

1 year ago

Making self-hosted HTML5 video and audio players in WordPress 3.6 responsive

By Jason WordPress 7 Comments

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 mediaelementjs.com 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.

Video

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.

Audio

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('<audio', '<audio width="100%"', $html);
}
add_filter('wp_audio_shortcode', 'my_audio_shortcode');

7 comments

  • Martin says:

    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.

    Martin

    • Jason says:

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

      http://www.uploadblvd.com/uploads/image_5162ea91aa579.png

      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: http://mysite.com/uploads/video.mp4
      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: https://github.com/johndyer/mediaelement

  • Tony Gray says:

    Perfect timing! Thanks so much for the tip.

  • Eva says:

    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!

  • martin says:

    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.

    Martin

  • Torsten says:

    Thanks for the hint! I tried with these CSS (http://css-tricks.com/rundown-of-handling-flexible-media/), but I have never looked into Twentys Thirteen. This is so much shorter …

    Do you have an idea how to align/center videos embedded with oEmbed?

  • Paul says:

    Hi Jason –

    I’m having trouble getting the shortcode player to scale to the full width of the containing div.

    I just posted a question on SO: wonder if you could take a look?

    http://stackoverflow.com/questions/19807778/wordpress-core-responsive-video-not-working-with-shortcode

    Many thanks
    Paul

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">