Responsive: Fluid Width YouTube Videos

Jun 28 2012

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 FitVids.js.

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  FitVids.js:

// 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 FitVids.js 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!

2 Comments to “Responsive: Fluid Width YouTube Videos”

  1. It’s Tools → Options → Advanced → GENERAL → Resize large images to fit in the bswroer window”. But I don’t think it works I see images flow off the right side of the page frequently, and I have it checked.I know this is an old post, but I’ve just found this cool blog!

    By Pedro on August 11th, 2012 at 1:44 pm
  2. [...] site with responsive design, I have stumbled across an issue with Firefox that seemingly only a few people are aware [...]

    By Responsive design with YouTube videos: Firefox can’t do it. Why the iframe resize issue needs to be fixed! | electro kami on December 23rd, 2012 at 2:33 pm

Leave a Reply