title: Youtube Iframe: onYouTubePlayerAPIReady() not called
body: <p>I have a page with an iframe which load a youtube video (the src of iframe is modified in runtime).
  I based on code by Rob W provided in different answers on this topic</p>
  
  <pre><code>&lt;iframe id="browser" class="browser" scrolling="no" name="navigation"  
  src="http://www.youtube.com/embed/nOEw9iiopwI?enablejsapi=1" application="youtube" style="display:  
  inline;"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Then, when iframe is loaded this code is executed:</p>
  
  <pre><code>$('.browser').load(function() {
  dispose_ytplayer();
  });
  </code></pre>
  
  <p>the called function dispose_ytplayer() is:</p>
  
  <pre><code>function dispose_ytplayer() {
      (function(){
      var s = document.createElement("script");
      s.src = "http://www.youtube.com/player_api";
      var before = document.getElementsByTagName("script")[0];
      before.parentNode.insertBefore(s, before);
       })();
  
      alert('called yt_dispose');
  
      var ytIframeplayer;
  
      function onYouTubePlayerAPIReady() {
          alert('called onYouTubePlayerAPIReady');
          ytIframeplayer = new YT.Player('browser', {
               events: {
                  "onStateChange": stopCycle
               }
          });
      }
  }
  </code></pre>
  
  <p>but the second alert ("called onYouTubePlayerAPIReady") is never called, and my chrome console.log shows this error message from <strong>www-embed_core_module-vflNmuGQq.js:26</strong> :</p>
  
  <p>Unsafe JavaScript attempt to access frame with URL <a href="http://mysite.com" rel="noreferrer">http://mysite.com</a> from frame with URL <a href="http://www.youtube.com/embed/nOEw9iiopwI?enablejsapi=1" rel="noreferrer">http://www.youtube.com/embed/nOEw9iiopwI?enablejsapi=1</a>. Domains, protocols and ports must match.</p>
  
  <p>Any ideas?</p>