My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 2942: YouTube <iframe> example not working on IE9
3 people starred this issue and may be notified of changes. Back to list
Status:  Fixed
Owner:  ----
Closed:  Aug 2012


Sign in to add a comment
 
Reported by info.mid...@gmail.com, Aug 7, 2012
--------------------------------------------------------------------------
NOTE: This issue tracking system is for developer products only.  If you
are not a developer/programmer and have a problem with a Google web site,
please report the problem to the appropriate group.  More information can
be found here: http://www.google.com/support/
--------------------------------------------------------------------------

Name of API affected: YT.Player constructor en events
YouTube Data API

Issue summary:
The code sample (see also below) works on all popular browsers, except IE 9. The example expects the onReady event to be fired (in onYouTubeIframeAPIReady() ) when the player is ready. In the onPlayerReady function the video is started. In IE9 this function is not called...

Steps to reproduce issue:
1.  Take the code below and run it is the various browsers.
2.
3.

Expected output:
I expect the video to start automatically.

Actual results:
The video starts in all browsers (Chrome, FireFox, Safari... but NOT in Internet Explorer 9

Sample code:

<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          videoId: 'u1zgFlCw8Aw',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        alert("onReady");
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

Aug 16, 2012
#1 amit.tsury@gmail.com
Having the exact same issue.
Aug 24, 2012
Project Member #2 je...@google.com
This is almost certainly because there's not <!doctype html> at the start of the example, and IE9 default to a non-HTML5-compliant mode without that. I'll get that added to the sample code.
Status: Acknowledged
Aug 24, 2012
Project Member #3 je...@google.com
The change to update the docs will be pushed out within the next few days.
Status: Fixed
Aug 6, 2013
#4 michael....@googlemail.com
With <!Doctype html> at the beginning it doesnt work for me too. I copied and pasted the whole HTML-Example code from the Youtube IFrame API Documentation and put it into an HTML-File for testing. In the Attachment you can see it. 

I tested it with IE10 and IE9 and no browserversion wants to work. With Chrome and FireFox it works of course well. Has this issue to be reopened or do i something wrong?

Could you please help me? Thanks!
test.html
1.6 KB   View   Download
Aug 6, 2013
#5 michael....@googlemail.com
To #4: In Attachment you will find two Screenshots from the Internet Explorer Debugger (when you click F12 in IE). It will not work for me :( 
Screenshot 1.jpg
327 KB   View   Download
Screenshot 2.jpg
176 KB   View   Download
Mar 6, 2014
#6 petervgi...@gmail.com
I am currently having this issue in IE 11 but not in Firefox or Safari.  If I disable Flash in "manage add ons" the problem goes away.  I copied the code verbatim (except for some console.log output) from https://developers.google.com/youtube/iframe_api_reference 

There is a Youtube demo player at  https://developers.google.com/youtube/youtube_player_demo, this works perfectly in Firefox, the play, pause and stop controls via the API work and the events are clearly firing as the Events and Function Calls are written to the screen in the "Statistics" section.  In contrast when I look at this in IE the play, pause and stop controls via the API do nothing.  There is no output in the statistics section.  The only way to play and pause is to use the buttons on the player.  If I disable Flash then the player & API works perfectly.

Please help.  Thank you.
Sign in to add a comment

Powered by Google Project Hosting