Not able to access the video element from iframe

Question

Here is a simplified version of my code. When I try to access iframe document, I get 'Blocked a frame with origin "http://mydomain.com" from accessing a frame with origin "http://www.youtube.com". Protocols, domains, and ports must match.'

<html>
  <body>
    <iframe id="player" type="text/html" width="640" height="390"
      src="http://www.youtube.com/embed/P5_GlAOCHyE?enablejsapi=1&html5=1"
        frameborder="0"></iframe>
    <script>
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          events: {
          }
        });
      }
    </script>
  </body>
</html>

JS console:

frame = document.getElementById('player')

frame.contentDocument

null

udidu udidu · Accepted Answer · 2013-08-05T12:37:34

You can't access the iframe from the top window (your domain) to the child window (iframe - youtube), That would violate the cross origin policy.

Not able to access the video element from iframe

1 Answers