title: YouTube iframe API - onReady and onStateChanged events not firing
body: <p>I'm really having a frustrating time handling YouTube's iFrame API. Everything was working fine until yesterday, when I noticed my .playVideo() and .pauseVideo() functions throw an "undefined is not a function" error. Now, I can see that none of my functions appear to work... the events "onready" and "onstatechange" don't appear to be firing either. Here's my code:</p>
  
  <pre><code>function addVideo(index, url){
                  $.getScript('https://www.youtube.com/iframe_api', function(){
                      processPlayer();
                  });
                  function processPlayer(){
  
                      var videos = document.getElementById("videos");
                      var individ = document.createElement("div");
                      individ.setAttribute("class", "individ");
                      var vid = document.createElement("div");
                      vid.setAttribute("id","vid"+index);
                      individ.appendChild(vid);
                      videos.appendChild(individ);
                      var player;
                      function onYouTubeIframeAPIReady() {
                          console.log("Are we here at least?");
                          player = new YT.Player('vid'+index, {
                              height: '165',
                              width: '100%',  
                              videoId: url,
                              playerVars: { 'controls': 0, 'showinfo': 0, 'rel': 0},
                              events: {
                                  'onReady': onPlayerReady,
                                  'onStateChange': onPlayerStateChange
                              }
                          });
                          window.players.push(player);
  
                          //individ.innerHTML+="Added by "+namesList[index];
                          individ.innerHTML+="&lt;div style='float: left;'&gt;&lt;span class='sname'&gt;Let it Burn&lt;/span&gt;&lt;br/&gt;&lt;span class='aname'&gt;Dave Matthews Band&lt;/span&gt;&lt;/div&gt;&lt;div style='position: relative;'&gt;&lt;img class='s_user' src='http://i.imgur.com/1AmnCp4.png'/&gt;&lt;/div&gt;";
                          window.players.push(player);
                      }
  
                      onYouTubeIframeAPIReady();
  
                      // 4. The API will call this function when the video player is ready.
                      function onPlayerReady(event) {
                          //event.target.playVideo();
                          console.log("We're ready");
                      }
  
                      // 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) {
                          console.log("HI?");
                          if(event.data === 0) {  
                              if(window.currentIndex &lt; window.players.length-1){
                                  var videoID = window.players[window.currentIndex].getVideoUrl().split("v=")[1];
                                  window.players[window.currentIndex].cueVideoById(videoID);
                                  window.currentIndex++;       
                                  window.players[window.currentIndex].playVideo();
                              } 
                          } else if(event.data === 2 ){
                              onYouTubeIframeAPIReady();
                          }
                          if(!window.playing){
                              //alert('playing');
                              window.playing = true;
                          } else {
                              //alert('stopping');
                              window.playing = false;
                          }
                      }
                      function stopVideo() {
                          player.stopVideo();
                      }
                  }
              }
  </code></pre>
  
  <p>Any ideas why? I'd really appreciate some help on this. The video itself loads fine, and the YTPlayer object can be called from console... yet these functions don't work, and onready/onstatechange don't fire. The iframes by default have the "origin=" bit in there, so that fix didn't work either.</p>