YouTube iFrame API - Full Screen button doesn't work in IE - Just goes gray (disables) after clicking

Question

I'm using YouTube's iFrame API to embed videos in a page. Everything works great across all browsers except... IE. In IE, the button to view the video full screen doesn't work. You click it and it just goes gray.

It's most likely something simple (isn't it always?), but I just can't find the issue, nor can I find any reference to this particular issue either.

I hesitate in giving out example URLs 'cause some of the issues I've fixed already won't be pushed to production until I can resolve this issue, but the primary issue is indeed there... so, an example of what I'm experiencing can be found at:

http://www.lauramercier.com/store/content/artistDetails.jsp?yt&itemId=1300008

Another example is at (may need to refresh a couple times - an issue I've already fixed locally):

http://www.lauramercier.com/store/content/artistDetails.jsp?yt&itemId=5500264

Example iFrame code for the 2nd example is:

<iframe name="youtubePlayer" width="225" height="135" class="youtube-player" id="youtubePlayer1" src="http://www.youtube.com/v/a5uiSVSQB3U&fs=1&playerapiid=youtubePlayer1&version=3&wmode=transparent&origin=http://lauramercier.com&modestbranding=1" frameBorder="0" style="padding-top: 5px; position: relative; z-index: 1;" type="text/html"></iframe>

Oh, and although the 'var tag' and 'tag.src' stuff is commented out, I have tried it that way too, and it didn't seem to matter if I just typed out the entire string:

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>

Another Oh... I also tried the 'swfobject.embedSWF' way (after I over-wrote our older swfobject.js with the one from Google code), but the button did the same exact thing.

Maybe something is conflicting?

Any help would be greatly appreciated!!!

Thanks!

Answer 1

After playing with all three APIs all day, I found the issue I had with each one:

Flash API: Needed minimum width of 240px (per my comment above). Thanks to Brian Dickey for that one.

JavaScript API: Although I added allowfullscreen="true" in the <embed> tag, I was missing the object param: <param name="allowFullScreen" value="true"></param>

iFrame API: This took the longest, and solved it for both the iFrame and JavaScript API. And after I found the solution, I was then able to find documentation on it. Basically, I was linking to videos using [youtube.com /v/ videoID] (AS3 and AS2 players) whereas it appears IE (and others) can only use [youtube.com /embed/ videoID] (HTML5 Player) - at least the way I am implementing them.

The only reason other browsers didn't suffer the same thing is that at some point during development I found a need (probably due to my not implementing wmode correctly) to call the iFrames separately using IE comments. And I must have gotten the youtube.com/v/ link from a different example page than I got initially, and didn't see the difference.

Now that I see this, I have also established the /v/ link doesn't work in any browser for my implementation either, so being they all need to be /embed/ I've not seen any other reason to split out using the IE comments.

I've also seen a youtube.com/e/ link across some pages as well, but that doesn't work for my implementation either.