Responsive design with YouTube videos: Firefox can’t do it. Why the iframe resize issue needs to be fixed!
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.
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:
- Broken (CSS implementation): CSS: Elastic Videos
- Broken (CSS implementation): Responsive YouTube, Vimeo, Embed, and HTML5 Video with CSS
- Broken (both JS and CSS implementations): Fluid Width Video
- Broken (JS implementation): FitVid.js
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.