YouTube API 和跨源请求

Question

YouTube 是否已开始锁定跨源请求？

我在我的网站上使用全屏自动播放英雄视频，并且它已经正常运行很长时间了。在过去的几周内，它停止工作，并且日志中出现以下错误。

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://tbrogames.github.io').

根据此问题的答案 question

我尝试在 http 和 https 之间更改主机，看看是否可以解决问题，但没有。

我的网站抛出错误:https://tbrogames.github.io/

我找到了一个更大的游戏网站，也存在这个问题。 https://playbattlegrounds.com/main.pu

他们还使用 YouTube 视频作为英雄/启动视频；它不再起作用，抛出同样的错误。

相关的javascript可以在这里找到 https://github.com/tbrogames/tbrogames.github.io/blob/master/js/defer.js

但是，这已经工作了很长时间，我没有更改任何代码。这就是为什么我认为这是 YouTube 做出的改变。

Answer 1

我认为这个错误实际上是误导性的。我遇到了同样的问题，但我相信实际上是 chrome 不再自动播放英雄。我收到此错误:未捕获( promise )DOMException:play() 失败，因为用户没有先与文档交互。 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

对我来说，修复方法是在播放视频之前在 Javascript 中对视频调用静音。具有相同属性的嵌入的 iframe 版本将不会自动播放

<script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('ythero', {
          videoId: '3FjTef9gn3Q',
          height: '100%',
          width: '100%',
          playerVars: {
            rel: 0,
            controls: 0,
            showinfo: 0,
            autoplay: 1,
            loop: 1,
            playlist: '3FjTef9gn3Q',
            modestbranding: 1
          },
          events: {
            'onReady': onPlayerReady,
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.mute();
        event.target.playVideo();
      }
    </script>