We have seen that, as ever, supporting older browsers leads to code bloat. What began with the <video> tag being one or two lines ended up being 10 or more lines (and an extra Flash file) just to make older versions of Internet Explorer happy! For my own part, I'm usually happy to forego the Flash fallback in pursuit of a smaller code footprint but each use-case differs.

Now, the only problem with our lovely HTML5 video implementation is it's not responsive. That's right, an example in a responsive web design with HTML5 and CSS3 book that doesn't 'respond'.

Thankfully, for HTML5 embedded video, the fix is easy. Simply remove any height and width attributes in the markup (for example, remove width="640" height="480") and add the following in the CSS:

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

However, while that works fine for files that we might be hosting locally, it doesn't solve the problem of videos embedded within an iFrame (take a bow YouTube, Vimeo, and others). The following code will add a film trailer for Midnight Run from YouTube:

<iframe width="960" height="720" src="https://www.youtube.com/watch?v=B1_N28DA3gY" frameborder="0" allowfullscreen></iframe>

However, if you add that to a page as is, even if adding that earlier CSS rule, if the viewport is less than 960px wide, things will start to get clipped.

The easiest way to solve this problem is with a little CSS trick pioneered by Gallic CSS maestro Thierry Koblentz; essentially creating a box of the correct aspect ratio for the video it contains. I won't spoil the magician's own explanation, go take a read at http://alistapart.com/article/creating-intrinsic-ratios-for-video.

If you're feeling lazy, you don't even need to work out the aspect ratio and plug it in yourself, there's an online service that can do it for you. Just head to http://embedresponsively.com/ and paste your iFrame URL in. It will spit you out a simple chunk of code you can paste into your page. For example, our Midnight Run trailer results in this:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/B1_N28DA3gY' frameborder='0' allowfullscreen></iframe></div>

That's all there is to it, simply add to your page and you're done: we now have a fully responsive YouTube video (note: kids, don't pay any attention to Mr. DeNiro; smoking is bad)!