One of the major drawbacks to responsive design is managing external plugins/resources, such as YouTube and Vimeo videos – which we can embed into our sites using an iframe. This is where we lose control. Working with iframes is sometimes tricky, especially with video and maintaining aspect ratios. There are some CSS hacks we can do to attempt making iframe videos responsive, but to no success.
Table of contents
Better attempts have been made, jQuery plugins, scripts. Some work great, but some warrant further action. Until recent, I’ve been using FitVids.js, from Paravel and Chris Coyier, which is a nifty plugin. But that’s exactly what I don’t want. More plugins. Scripts are by far more effective, and let’s face it, there’s no point using a plugin for responsive videos – why would you want to target a container and choose which videos are responsive? It’s responsive or not, all or nothing.
The demo includes both a YouTube and Vimeo iframe embed, both at different aspect ratios. Both fluid, both 100% width.
Before attacking our iframe and ripping the attributes off it, let’s have a think of what we can use. Let’s look at our YouTube iframe:
A width and height attribute already exist, I see no reason to ‘remove’ these like other plugins, let’s simply overwrite them with our future code. The inline width and height attributes may be oldschool, but they’re here for a reason this time – so let’s keep them. It saves extra lines of markup removing the attributes and adding new inline styles.
Targeting the iFrame
Let’s grab the iframe in the page:
Next we need to setup a for loop, and loop through each of our iframes:
Searching for YouTube and Vimeo
The next step we want to take is to identify our players when scanning through our iframes. We then run a quick if statement to test whether the iframe source contains youtube, or vimeo.
From here, we can then get started with some magic.
Aspect Ratio calculation
Adding attributes to the iFrame
First let’s create a variable for our iterated iframe:
This allows us to simply make one declaration of iframe inside our loop.
Fluid div wrap
Now we’ve added some styles to our iframes, they’re all ready to go. But now we need to wrap them in a with fluid properties.
The trick I’ve used here is to apply the styles inline, using style=””, instead of injecting styles into the - saving additional script. What I have done though is include a class, which is appended to the div, for extra styling purposes should you need it. You’ll notice at the end, we bring back our videoRatio (which we multiplied by 100 to use as a percentage). Then we add this figure to a percentage sign, which uses padding-top to ‘emulate’ the video aspect ratio. It’s merely a clever hack-trick, but a brilliant one (used in FitVids but taken from A List Apart).
Wrapping the div
Our script is almost complete, we just need to wrap our iframe in our newly created div. This is similar to jQuery’s $.wrap(); function.
Putting it all together (now updated to v1.1.0)
Here’s what our finished script looks like. The things we’ve been able to achieve are:
- Plugin/jQuery free
- Faster rendering
- Minimal scripting
- Enhanced performance
I’ve tested in Chrome, FireFox, Opera, Safari, IE7, IE8 and IE9, and all is well. Though if you run into any problems or even have a suggestion on improving FluidVids.js, feel free to comment or submit a on GitHub or Fork.