fitvids.js

Fitvid.js is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. We use FitVids to responsively bring you all of our video resources… great isn’t it.

FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

How it works

The plugin is based on Chris’ pre-exising work on fluid videos and the Intrinsic Ratio method suggested by Thierry Koblentz (ALA #284). With these gems of knowledge combined with Dave Ruperts ability to only make tiny jQuery plugins, getting your videos do aspect ratio-based resizing is now as easy as targeting your .container, .post, etc. with FitVids.

$("#thing-with-videos").fitVids();

It’s that easy! Best part, there’s very little Javascript happening. After the initial setup, it’s all percentage based resizing with just CSS.

Lets take a look at it in practice with this code pen

See the Pen RWD.is example: FitVid.js by Justin Avery (@justincavery) on CodePen