Responsive HTML5 video

Recently I was building a one page site, the centre piece of which was a video. Naturally I went with HTML5 video with a Flash fallback, but I also wanted to make the site, and the video, responsive.

There are a couple of ways of approaching this, although none of them are perfect. The great debate about adaptive images continues, and is also appropriate here, as having something similar for both video and audio files would be ideal. Since no such solution is available, we have to look at alternatives.

Media queries

If you’ve been reading up on responsive design you will of course have heard of media queries and chances are you’ve used them yourself. For those who haven’t, media queries allow us to define specific CSS rules for different output devices without changing the actual content. (for further information see CSS media queries.)

But, not many people know that you can actually apply media queries to the source element when providing different source files for your embedded HTML5 video and audio. You can achieve this by using the media attribute.

By adding a valid media query to a video source (for example) we can specify that this particular source should be used when a device matches the media query. For example:

<video controls>
   <source src="parrots-small.mp4" type="video/mp4" media="all and (max-width:480px)">
   <source src="parrots-small.webm" type="video/webm" media="all and (max-width:480px)">
   <source src="parrots.mp4" type="video/mp4">
   <source src="parrots.webm" type="video/webm">
</video>
									

In this example, the file parrots-small.mp4/webm will be loaded for devices that have a max-width of 480 pixels, otherwise the parrots.mp4/webm file will be loaded.

Browser support

A quick browser test shows that Chrome, Safari, Internet Explorer 9 and Opera currently support the media attribute. They also only load the relevant file (e.g. parrots-small.mp4 or parrots.mp4 but not both). Firefox doesn’t support the media attribute (Firefox 15 which was released on 28th August does support the media attribute).

(See the media query example.)

This all sounds great, but, but there’s talk of the media attribute being removed from the specification.

So what else can we try?

CSS

We could also simply use CSS to specify fluid dimensions for our video file.

The main catch with this though is that we serve the same video file, regardless of the device being used. Naturally this could be an issue depending on the size of the video file as we probably don’t want our users to be downloading a huge video file, unless they chose to.

<video controls preload="none">
   <source src="parrots.mp4" type="video/mp4">
   <source src="parrots.webm" type="video/webm">
</video>
									

For this video, we inform the browser to not download any of the video and we should also add a message informing the user how large the video is so they can make that choice for themselves.
Note: Since the file being served will differ (MP4 or WebM) depending on the browser support, the message should differ also. For simplicity I have mentioned the largest video size only.

<video controls preload="none" poster="parrots-poster.jpg">
   <source src="parrots.mp4" type="video/mp4">
   <source src="parrots.webm" type="video/webm">
</video>
<div class="warning">Note: This video is up to 1078KBin size. Playing it will cause this file in its entirety to be downloaded.</div>
									

Since we informed the browser not to preload any of the video, we’ve added a poster image to display instead. The image itself could be larger than the amount of data the browser might download if preload was set to load the metadata only, so it might be worth checking that.

To ensure that the video fits nicely in the device’s screen, we then add the following media query to the page’s CSS:

video { 
   width:100%;
   max-width:500px;
   height:auto;
}
									

With a width of 100%, the video would fill the entire browser space so we can also limit how big it can be by setting a max-width.

(See the CSS example, and also using The Responsinator.)

We can of course also combine this with the media query method mentioned above, ensuring that the video always fits the screen of the device it’s being displayed on.

Conclusion

The media attribute is an ideal solution if your video files can be quite large. The fact that the browser only downloads the one it needs is also ideal. However since it might disappear from the HTML5 specification, using it would mean that you may have to revisit your implementations in the future.

Simply serving the same video file and using CSS to ensure it fits in the window again only works if you can keep you videos small enough to not be much of an issue for those who are on slower networks and who want to save on bandwidth.

No solution is idea, but I suspect when a solution to responsive images is found, then it will be adapted to suit both HTML5 video and audio.