YouTube iFrame API - the Full Screen button does not work in IE - it just goes gray (turns off) after clicking

Question

I use the YouTube iFrame API to embed videos on a page. Everything works fine in all browsers except ... IE. In IE, the button for viewing a full-screen video does not work. You click on it and it’s just gray.

Most likely something simple (right?), But I just can’t find the problem, and I can’t find links to this particular problem.

I hesitate to give examples of URLs, because some of the problems I fixed will not be transferred to production until I can solve this problem, but the main problem really is ... so that the example that I am experiencing can be found at address:

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

Another example: (you may need to update a couple of times - a problem that I have already fixed locally):

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

Example iFrame code for the second example:

<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" elements are commented out, I tried this too, and it didn't seem to matter if I just printed the whole line:

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

Another Oh ... I also tried the swfobject.embedSWF method (after I rewrote our old swfobject.js with google code), but the button did the same.

Maybe something is contradictory?

Any help would be greatly appreciated.

Thanks!

Answer 1

After playing with all three APIs all day, I found the problem that I had with each:

Flash API A minimum width of 240 pixels is required (in my comment above). Thanks to Brian Dickey for this.

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

IFrame API This took the longest place and resolved it for both the iFrame and the JavaScript API. And after I found the solution, I was able to find the documentation for it . Basically, I got attached to the video using [youtube.com / v / videoID] (AS3 and AS2 players), while IE (and others) can only use [youtube.com / embed / videoID] (HTML5 Player) - at least how I implement them.

The only reason other browsers weren’t hurt is that at some point during development I found it necessary (possibly due to the fact that I didn’t implement wmode correctly) to separate iFrames separately using IE comments. And I must have received the youtube.com/v/ link from another example page than I originally received, and did not see the difference.

Now that I see this, I have also found that / v / link does not work in any browser for my implementation, so since they should all be / implemented / I did not see any other reasons for sharing using IE comments.

I also saw the youtube.com/e/ link on some pages, but this also does not work for my implementation.