使用YouTube iframe API时出现postMessage错误，寻求修复方案

这个问题我最近也碰到了，确实是YouTube官方www-widgetapi.js脚本的一个新bug——哪怕你在初始化播放器时指定了origin参数，脚本内部还是会错误地用https://www.youtube.com作为目标origin，和页面实际origin（比如你提到的https://google-developers.appspot.com）不匹配，导致postMessage报错。下面是几个亲测有效的修复方法：

方案一：重写Player的消息接收逻辑（推荐） #

直接修改YouTube Player实例的消息校验逻辑，让它接受当前页面的origin：

window.onYouTubeIframeAPIReady = function() {
  // 保存原始的消息接收函数
  const originalReceiveMsg = window.YT?.Player?.prototype?.receiveMessage;
  
  if (originalReceiveMsg) {
    window.YT.Player.prototype.receiveMessage = function(event) {
      // 允许当前页面origin和YouTube的origin，跳过错误校验
      const allowedOrigins = [window.location.origin, 'https://www.youtube.com'];
      if (allowedOrigins.includes(event.origin)) {
        originalReceiveMsg.call(this, event);
      }
    };
  }
};

这个方法不会影响播放器的正常功能，只是绕过了错误的origin校验逻辑，是目前最稳妥的方案。

方案二：强制指定初始化时的origin参数 #

虽然官方脚本可能没正确使用，但明确指定origin为当前页面域名，在部分场景下能减少错误触发：

new YT.Player('player-container', {
  videoId: 'YOUR_VIDEO_ID',
  width: 640,
  height: 360,
  origin: window.location.origin // 明确设置当前页面的origin
});

方案三：降级到旧版本API脚本 #

如果你的场景不需要最新功能，可以尝试加载旧版本的YouTube iframe API，比如v1.2.1版本，这个版本还没有引入这个bug：

<script src="https://www.youtube.com/iframe_api?v=1.2.1"></script>

注意：旧版本可能缺少一些新特性，需要根据你的业务需求测试兼容性。

方案四：使用sandbox属性限制iframe行为（谨慎使用） #

给YouTube的iframe标签添加sandbox属性，限制跨域消息的发送范围，但这个方法可能会影响播放器的全屏、弹窗等功能，需要谨慎测试：

<iframe id="player-container" sandbox="allow-same-origin allow-scripts allow-popups allow-presentation"></iframe>

内容的提问来源于stack exchange，提问作者sanbor