YouTube Iframe API - OnStateChange suddenly not working

Question

Until around 6pm EST this code below would have worked fine, but now for some reason onStateChange is not firing. I've tried on multiple browsers and have had friends check it. See anything obviously wrong?

<div id="video">
  <div id="player_wrap">
    <div id="player"></div>
  </div>
</div>

   <script>

    var tag = document.createElement("script");
    tag.src = "http://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onYouTubeIframeAPIReady() {
    var player;

        player = new YT.Player("player", {
          width: 640,
          height: 400,
          videoId: "MbfsFR0s-_A",
          events: { 
            'onReady': onPlayerReady, 
            'onStateChange': onPlayerStateChange          
          }
        });
      }

function onPlayerReady() {

alert ("player ready"); 

}


function onPlayerStateChange(event) {

alert ("something happened"); 

}

any error in Developer Console ? there is no recent changes in API : https://developers.google.com/youtube/iframe_api_reference — Raptor, Jun 13 '13 at 04:00

score 6 · Answer 1 · answered Jun 13 '13 at 04:39

6

This is a temporary issue with the iFrame Player API. You can read about it here: https://code.google.com/p/gdata-issues/issues/detail?id=4706

Jeff Posnick posted a temporary workaround here: http://jsfiddle.net/jeffposnick/yhWsG/3/

Basically, you just need to add the event listener within the onReady event (just a temporary fix):

function onReady() {
    player.addEventListener('onStateChange', function(e) {
        console.log('State is:', e.data);
    });
}

answered Jun 13 '13 at 04:39

Matt Koskela

5,269
3
26
29

1

Instead of answering a question that is a duplicate of another question you answered, flag it as duplicate (flag >> it doesn't belong here, or it is a duplicate). Remember that a question without accepted or up-voted answers cannot be chose as the one that is duplicated. If none of the questions has answers, flag one of them for moderation attention. – apaderno Jun 13 '13 at 05:37
Good call, thank you. I've gone ahead and flagged it as a duplicate. – Matt Koskela Jun 13 '13 at 06:48

score -1 · Answer 2 · edited Sep 02 '13 at 05:44

The solution posted here works fine and is REALLY clean:

player = new YT.Player(element,{
    events: {
        onReady: function(){
            /*
            Do your stuff
            */
            // Attach a void function to the event
            player.addEventListener('onStateChange',function(){});
        },
        onStateChange: function(){
        // Actual function that gets executed during the event
        }
    }
});

YouTube Iframe API - OnStateChange suddenly not working

2 Answers2

Linked