9
votes

I have Embedded three Youtube videos, they work perfectly in ALL BROWSERS except Firefox.

Tried clearing cache on server side, cleared cookies & cache locally, tried 18 different computers, tried Windows 7, Windows 8, Linux Ubuntu 12.10, Fedora 16, Mac OSX, iOS, Android 4.0.3. Tried Firefox versions 7 through 15.

Even tried redoing website from scratch.
Same problem all around... Videos do not load in Firefox and Firefox only.

What am I doing wrong?

I have looked all over, asked around on IRC, posted questions in forums but no luck.

I have even tried the old youtube embed codes. Vimeo embed iframes work perfectly fine!

My code is as follows: http://pastebin.com/T3w09bqW
--Note: the middle video is using the old youtube embed code.--

Here is a picture.

2

2 Answers

11
votes

Found this on a website hope it helps:

Seems that the problem occurs only when youtube shows the flash version of video, while with html5 it works. You can force YT to serve the html5 version of the video adding this to the iframe embed code: html5=1

<iframe src="http://www.youtube.com/embed/_VIDEO_ID_?html5=1" [...]></iframe>

Consider also that if the html5 version of the video for Firefox is not present, YT serves however the flash video as fallback. So the issue is surely related with flash.

//edit changed &html5=1 to ?html5=1

2
votes

Check the parent element to see if a CSS3 transform is applied. Our videos quit working in FireFox 24-26 until we pulled the following code off of a parent wrapping element:

 transform: translate3d(0,0,0); 

In this specific case, the 3d transform was applied to make things look better in Chrome, (hence the (0,0,0), but if you do a search through your CSS for transform and find an entry, try pulling it. Or testing in FireBug first.