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.
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?
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.
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).
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!