Responsive: Fluid Width YouTube Videos

Building a responsive website requires many variables. You have to think about every element in the DOM and how it will react when the browser is resized. Here at RD2, we recently converted our site to be responsive. I have to say, it’s pretty awesome. But when I threw a YouTube video in one of our blog posts, it wasn’t responsive to the browser window or any smaller device.

Problem

Using WordPress’s auto embed feature, how can I modify the video’s width and height when I resize the browser using YouTube’s iframe code?

Answer

My original attempt at accomplishing this with CSS alone was not successful. It involved the user adding a wrapper element around the iframe every time a YouTube video was inserted. This did not seem like a good solution. Chris Coyer at css-tricks.com wrote a great article that solved this problem. He recommended using a jQuery plugin called .

The short answer is that it resizes the iframe’s width and height attributes when the browser window is resized. It worked perfectly for what I needed. But I quickly ran into a little snag.

Here is a handy snippet I like to use to target YouTube videos using  :

// Implement Responsive YouTube videos using fitvids.js plugin
 jQuery( "iframe[src^='http://www.youtube.com']" ).parent().fitVids();

Why Firefox, Why?!

UPDATE: As of Firefox 16+ the below issue has been resolved.

After loading in the  and applying it to my theme, I went to Firefox on my Windows 7 machine to test. I quickly noticed that it would not resize smaller than the original width and froze the UI entirely. I checked for any javascript errors and got nothing. I tested on a few more computers and got the same result.

I loaded up the site on a Windows XP machine using Firefox and it worked! So I’ve narrowed it down to the problem occurring on Windows 7 and Windows Vista 64-bit machines running Firefox 10+. This seems to be an issue everywhere I look on the internet. Here are a few sites that seem to have that issue on Firefox (PC).

http://www.smashingmagazine.com/2008/12/31/50-incredible-stop-motion-videos/
http://css-tricks.com/examples/FluidWidthYouTube/
http://www.kevinleary.net/responsive-video-embeds-plugin-example/

This is a bug posted to the Mozilla Bugzilla about the CSS resize property for iframes.

So here is where I get to ask you fellow developers for help. Have you created a solution for this problem yet? If so, post it in the comments and let’s improve the internet!