Last week, Trent Walton tweeted about the frustration of getting standard video players to work in a responsive design:
I'd pay well for a video service that made embedding fluid/responsive videos the right way easy. It's way more difficult that you'd think.
— Trent Walton (@TrentWalton) August 31, 2011
Trent is right. It’s deceptively difficult to make videos fluid and responsive. I almost lost all my hair getting it to work on Do Lectures. On one hand, the HTML5 video element is super easy to make responsive: video { max-width: 100%; height: auto; }
Unfortunately, if you want to do something basic like embed a video from YouTube or Vimeo (that has a flash fallback) you can set the width: 100%; but the height stays the same breaking the aspect ratio… until now.
After some interstate brainstorming and coding with Chris Coyier, we came up with a solution. Mr. Walton, we’re here for our check.
Introducing FitVids
FitVids is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. It currently supports the major video vendors: YouTube, Vimeo, Blip.tv, and a couple outliers.
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 my 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.
You can fork it on Github to dig in deeper into how it works. We’d love your feedback.
FitVids happily joins the Paravel family of easy-to-use tools for radical web: Lettering.js and FitText. If you use FitVids or any of these plugins on a something, let us know! We love to seeing this stuff in action.
Updates: Plugins and Modules
Absolutely amazed that people are taking this and running with it. Thanks, y’all.
Also, we’ve made some updates to FitVids and you can add your own custom video vendors and test out other players. If this interests you, read more here.