YouTube Iframe API - OnStateChange doesn't work unexpectedly

Question

Until about 6pm EST, this code below would work fine, but now for some reason onStateChange is not firing. I have tried several browsers and I have friends checking it out. See something clearly 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"); } 

Answer 1

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

Jeff Poskick posted a workaround: http://jsfiddle.net/jeffposnick/yhWsG/3/

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

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

Answer 2

The solution posted here works fine and 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 } } });