#029: Integrating FitVids.js

(Updated on )

Images aren’t the only media that need to play nice within our flexible grid. And images were easy compared to video! When you set the width of an <img> and override its height value to auto, the image will naturally retain its aspect ratio. This is also true of <video>, but honestly most video on the web these days embedded on pages directly through the <video> tag.

Case in point, I tried doing that here on the lodge and ultimately gave up since Vimeo Pro was so much more practical (works on any device, nice player, cheap, fast streaming, etc). You don’t embed Vimeo videos (typically) through a <video> tag, you use their provided embed code, which is an <iframe>. YouTube and number of other of the more popular video services use this too.

iframe do not keep their aspect ratio when resizing like images do. However, we can figure out what the aspect ratio is originally by testing it’s width and height and diving. The we can use that information to create a box with that exact aspect ratio (using a padding trick, see Uncle Dave’s Ol’ Padded Box) and absolutely position the iframe within it. See: Intrinsic Ratios for Videos. That way when we resize wider and narrower, the video essentially behaves just like an image, respecting its apsect ratio.

Or, we could just use FitVids.js (which I helped write) to automate this entire process (it literally does just what I described, only automatically). We include this library in our global.js in the same concatenating way we did with prism.js. For the first time we need jQuery, so we snag that link from ScriptSrc and link it up in the footer before our global.js. Then in our global.js we call FitVids. Done and done.