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.
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
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:
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.
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.mp4 but not both). Firefox doesn’t support the
media attribute (Firefox 15 which was released on does support the
(See the media query example.)
This all sounds great, but, there’s talk of the
media attribute being removed from the specification.
So what else can we try?
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.
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.
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:
width of 100%, the video would fill the entire browser space so we can also limit how big it can be by setting a
(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.
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.