Responsive YouTube Videos with FitVid.js

UPDATE: Yes, I know, there is no difference now that I have switched my website to be based on foundation. Foundation has responsive iframe’s built into it. This solution still works, the demo is just irrelevant on this page. 🙂

One of my favorite libraries to add into websites lately is FitVid.js. FitVid is a handy little jQuery library to make videos (Read: iframes in general) fluid in responsive designs easily. If you are building a responsive site and are embedding iframes look no further, FitVid will do the trick.

To get started you’ll want to first download the latest files from GitHub, extract them, and upload them to your server somewhere you’ll be able to easily reference them.

After you’ve got your js files on your server open up your header.php file (or the wp_head hook) and toss in include the files as well as jQuery (In the example below, I am using js files from MediaTemples CDN):

 

Be sure to replace /path/to/ with the path to your fitvid.js file we uploaded earlier and be sure to define whatever class you want to wrap videos in instead of #idorclasswithvideos. Personally I just use .video-container.

Now that you’ve got that in your head tag you should be just about ready to roll.

To use FitVid you’ll just want to wrap your iframe code in whatever class or id you defined in the JavaScript. In my example I used .video-container so my markup would look something like the following:

 

Now to take a peak how it works using the videos below. Make your browser window bigger/smaller and watch how the different videos react

With FitVid.js

Without FitVid.js

I’m sure you can see the difference right away! 🙂

If you play around with the “Use your own provider” feature with the script you can get this working with stuff like Google Maps, Appointlet, and many other services using iframes to embed content.