Instant Fluid Videos with Viewport Width Units

Long story short: video isn’t responsive by default.

Huge write-ups have been done on the subject. The most famous of which is Thierry Koblentz’s A List Apart article which suggests doing a lot of stuff with position: relative and some hacks for old Internet Explorer, and by the time you’re done implementing it, you’ve added dozens of lines of code to your markup and CSS just to make a video responsive. Argh!

Thankfully we now have access to the vw sizing unit and as long as you don’t have to support old Android devices or IE8, it’s relatively safe to use.

A terrific step-by-step tutorial by Cory Simmons on how to use easily viewport units to size videos and make them responsive. No more hacks!