web-dev-qa-db-ja.com

Youtube「同じプロトコルを使用している場合でも、Origin「http://www.youtube.com」のフレームにアクセスできないようにブロックしました」

Youtubeプレイリストを埋め込むと、次のエラーが発生します。

Blocked a frame with Origin "http://www.youtube.com" from accessing a frame with Origin "http://www.mydomain.com". Protocols, domains, and ports must match.

HTTPとHTTPSを混在させているわけではないので、なぜ最初にこのエラーが発生するのかわかりません。

最近、YouTube埋め込みプレイリストに最初のビデオの埋め込み画像が表示されず、[すべて再生]ボタンで黒い画面が表示されるだけで、上記のエラーが原因であるのかと思います。

youtubeyoutube-apiyoutube-javascript-api
24
jbx

どうやらchromeによって与えられたエラーはバグです。「すべて再生」ボタンの問題で黒い画面を解決するために、私は次のようにiframeではなくJavaScript APIを使用しました。 ：

<!DOCTYPE html>
<html>
  <body>
    <div id="player"></div>
    <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', {
          height: '390',
          width: '640',
          videoId: '',
          events: {
            'onReady': onPlayerReady 
          }
        });
      }
      function onPlayerReady(event) {
        player.cuePlaylist({'listType':'playlist','list':'PLE2714DC8F2BA092D'});
      }
    </script>
  </body>
</html>

ここに示されているように、答えのために@jlmcdonaldに感謝します： Youtube埋め込みプレイリストは最初のビデオの代わりにプレイオールボタンを再生します

5
jbx