title: embedded iframe element not working with youtube iframe api
body: <p>Here's the jsfiddle for this project: <a href="http://jsfiddle.net/frankzfaz/bweH4/13/" rel="nofollow">http://jsfiddle.net/frankzfaz/bweH4/13/</a></p>
  
  <p>The iframe elements I want to use are loaded into the html via javascript when a button is pushed: </p>
  
  <pre><code>document.getElementById('iframeload').innerHTML = '&lt;iframe id="ytplayer" type="text/html" width="300" height="300" src="https://www.youtube.com/embed/' + metalMusicVid[indexVid].youTubeId + '?enablejsapi=1&amp;modestbranding=1&amp;rel=0&amp;iv_load_policy=3&amp;showinfo=0&amp;controls=0&amp;autoplay=1" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;';
  </code></pre>
  
  <p>As you can see, "metalMusicVid[indexVid].youTubeId" pulls youtube video IDs from a js array. This is how I want it to work.</p>
  
  <p>I want this to work with the youtube api event listeners. As seen here:</p>
  
  <pre><code>      var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
      // youtube player api stuff
      function onYouTubePlayerReady(playerId) {
      var player = document.getElementById("ytplayer");
      player.addEventListener("onStateChange", "onytplayerStateChange");
      player.addEventListener("onError", "onPlayerError");
  
                      // get current time and display it.
                        setInterval(function(){document.getElementById('vidTime').innerHTML = "Current: " + pad(Math.floor(player.getCurrentTime() / 60)) + ":" + pad(Math.floor(player.getCurrentTime() % 60))}, 1000);
                        // pads number with extra zeros, looking more like a real digital clock
                            function pad(val) {
                                var valString = val + "";
                                if (valString.length &lt; 2) {
                                    return "0" + valString;
                                } else {
                                    return valString;
                                }
                            }
    }
  
  
  function onytplayerStateChange(newState) {
      //console.log("New state " + newState); 
  if(newState === 0){alert('the youtube api is working')}
  if(newState === -1){alert('the youtube api is working')}
  }
  
  function onPlayerError(errorCode) {
    console.log("New ERROR " + errorCode);
  }
  </code></pre>
  
  <p>This worked with object embeds, but I want to use iframes so it works better with ipads and mobile devices. And no, I don't want to load the iframes from the api itself as seen in the google documentation, because each video-id is loaded from a javscript array.</p>
  
  <p>All I need is for these event listeners to pick up the new iframe from it's element id.</p>
  
  <p>URL: <a href="http://jsfiddle.net/frankzfaz/bweH4/13/" rel="nofollow">http://jsfiddle.net/frankzfaz/bweH4/13/</a></p>