search

blasten / turn.js

The page flip effect for HTML5
www.turnjs.com
Other
7.23k stars 2.48k forks source link

Embeding Youtube IFrame doesn't work in Firefox #55

Open Lamair opened 12 years ago

Lamair commented 12 years ago

I have a youtube video that is embeded in the div and it shows up just fine outside the flipbook but not in it. I just get a black frame in Firefox.

blasten commented 12 years ago

Thanks for let me know, I'm going to take a look at it.

mrbrown77 commented 12 years ago

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.

vool commented 12 years ago

Another thing to note is that ads are not supported in html5 videos, so unfortunately videos with ads will be forced to use flash.

ryHollingsworth commented 12 years ago

I had a similar issue with this. On a Mac everything looked fine; however, on a PC, using any browser, the video would have z-index issues resulting in the youtube player overlapping the cover page.

I tried forcing html5, but youTube's video controls wouldn't load correctly. This is probably a temporary problem with youTube, but as someone else mentioned, the ad enabled videos also will force flash.

I used the open source library SWFObject as a work around. I created a simple flash player in Flash which takes a few flash vars so I can use this same swf for any youtube video, and by using the SWFObject library I solved the z-index issue, and for mobile phone viewers or people without flash i have used the iframe method in a conditional div tag. (handled by the SWFObject code)

Heads up though: I ran into an issue where the min versions of SWFObject and turnjs would conflict with one another. Since i'm in development mode still I just went to the non min versions, but will probably end up combining the two files into one js file and then creating a min version myself for final site. (conflicting var names i'm assuming)