title: How to use the YouTube iFrame API in Chrome and Firefox?
body: <p>I have a YouTube video <a href="http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html">embedded on my site using an iFrame</a>. I want to use <a href="http://code.google.com/apis/youtube/iframe_api_reference.html">the API</a> to pause the video, but in Chrome I get an error:</p>
  
  <pre><code>Unsafe JavaScript attempt to access frame with URL http://subdomain.example.com/ from frame with URL http://www.youtube.com/embed/KmtzQCSh6xk?enablejsapi=1&amp;origin=http://subdomain.example.com. Domains, protocols and ports must match.
  </code></pre>
  
  <p>In Firefox (3.6) I get this error:</p>
  
  <pre><code>Permission denied for &lt;http://www.youtube.com&gt; to call method Location.toString on &lt;http://subdomain.example.com&gt;.
  </code></pre>
  
  <p>I've tried putting the iFrame in myself or adding it with the API. Either way the player gets in, but I have no API control over it.</p>
  
  <p>Here's the relevant part of my code:</p>
  
  <pre><code>&lt;div id="player"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  var player;
  function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
          height: '433',
          width: '731',
          videoId: 'KmtzQCSh6xk'
        });
  }
  
  $("#pause_button").click(function(){
    alert("Pausing " + player);//is undefined :(
    player.pauseVideo();
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>How do I get browsers to allow the YouTube iFrame to access my page's main frame?</p>
  
  <p>Thanks!</p>