Using FluidVids.js

Today, I’m going to show to use FluidVids.js to make your YouTube and Vimeo videos (and more) responsive.

Wait... huh?

I know what you’re thinking: isn’t that easy to do already? You can use this bit of code to make HTML5 videos responsive:

video {
    max-width: 100%;
    height: auto;
}

When you try that with iframes, though, the sizing gets all messed up. Check out this short video from Dave Rupert showing the problem in action…

For a while, I was using the FitVids.js, the awesome jQuery plugin Dave mentions in the video. FitVids.js is really, really awesome.

And the Todd Motto released FluidVids.js, which is even awesomer (yes, awesomer is a word).

Why FluidVids Rocks

FluidVids is written in vanilla JavaScript. It works with any JavaScript framework you want to use (or none at all). The minified version is less 1kb in size. You don’t need to target or activate anything. Just add the script to your site and you’re good to go.

What I like most about FluidVids, though, is that it’s really easy to customize. Want to add SlideShare or Hulu or whatever? Super easy to do!

Getting Started

Getting started with FluidVids is really easy:

Download it.
Add the script to your site.
That's it!

Adding a Fallback

You don’t need to do this, but I liked to add a fallback in case JavaScript isn’t enabled or working.

If someone accesses your site from a small-screen device without JavaScript support, videos will extend beyond the page wrapper and mess up your layout. Here’s the code I use:

iframe {
    max-width: 100%;
}

Yes, that does look a lot like the code for fluid HTML5 video. The only difference is that I’ve left out height: auto;.

If JavaScript isn’t working, the iframe will be a normal width on bigger screens, and fluid on smaller ones, but the height won’t change. Video containers will look a bit disproportionately tall, but the videos themselves will be normal proportioned and work just fine.

Adding Other Services

Note: FluidVids has been rewritten, and no longer requires you to hack the core code to add additional vendors.

To add other services to FluidVids, open up the JavaScript file and find this line:

var players = /www.youtube.com|player.vimeo.com/;

That’s where you’ll add URLs for other iframe services. The URL structure will vary by service, and the easiest way to find it is to get the embed URL for a service you’d like to add and look at the iframe src.

An Example

As an example, here’s the embed code for a SlideShare presentation:

<iframe src="http://www.slideshare.net/slideshow/embed_code/8049732?rel=0" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

The part we care about is src=“…”. The “base” for the SlideShare embed code is www.slideshare.net. That’s what we’ll add to fluidvids.js.

In fluidvids.js, we’ll add www.slideshare.net to var players, separated by a |. Make sure that all of the player URLs are between the beginning and ending / symbols. Here’s the new code:

var players = /www.youtube.com|player.vimeo.com|www.slideshare.net/;

Following this pattern, you can add any iframe embedding service you want to FluidVids.