Responsive design with YouTube videos: Firefox can’t do it. Why the iframe resize issue needs to be fixed!

firefox responsive design

But it’s still better than IE

Irony

It’s a very rare sight: something in CSS that works correctly in Internet Explorer but not Firefox. But to be honest, the release of Internet Explorer 9 has somewhat changed the landscape for browser optimization in most web developer’s lives.

For me, I don’t have to really worry about any issues arising in IE9 that wouldn’t crop up in the latest versions of Chrome, Safari, or Firefox. So, while rebuilding electro kami’s website from scratch with a mobile first ideal and responsive design principles, I seem to have hit a snag.

Responsive videos

There is no doubt that content is king, and in the present state of the internet, pictures and videos are huge chunks of entertainment content gold. I find it hard to imagine that a blog can be successful without having some kind of rich media usage like photos, videos, or GIFs.

So while redoing my site with responsive design, I have stumbled across an issue with Firefox that seemingly only a few people are aware of.

Responsive iframes in Firefox do not work as expected. Both CSS and JS based implementations fail to work as the browser window is resized.

The most common issue is a jumpy, stuttery, or stuck window, where the browser cannot resize because the YouTube video becomes stuck in a certain size.

work time fun

This is the joy of working on the web

There are currently two open bugs on the Mozilla issue list:
Bugzilla bug 680823
Bugzilla bug 683394

These need to be fixed if web developers plan to utilize Firefox correctly!

Until it is fixed, all of these responsive YouTube video issues will not be resolved:

As of writing, every solution for responsive YouTube videos is still broken in Firefox as of version 17!

Now what?

Until Mozilla fixes this, we can only wait. I myself would love a solution that works in all browsers (as would everyone) – we should all support as many browsers as we can.

For now, I will just use FitVid.js and hope and pray that Mozilla puts a patch in.

Does anyone at Mozilla care about fixing this already?

Update!

It seems as though if your computer is running Flash 11.3… and Firefox, especially on a Windows computer, you will see this issue. This is outlined in the many threads found here:
Mozilla Support
gmane
Google Groups
Even on a forum!

So in all fairness, I fail. My home computer browser is actually where the problem lies – it is not up to date.

Related Posts
  • Snagged 2

    I too have found this issue and appreciate your insight on it. Such a snag you would think should be top priority to fix. Sheesh. If anyone has suggestions on a workaround/fix for this, oh please do tell. Thanks!

    • camsjams

      Well I have seen the issue fixed with the upgrade of Flash to 11.3 or higher. While this won’t really help users who haven’t done this upgrade, at least the issue is fixed.