javascript - YouTube 嵌入式视频 JavaScript API 无法在 DOMWindow 上执行 postMessage 提供的目标来源不匹配

Question

当我使用 YouTube 嵌入式视频 JavaScript API 在 Chrome 浏览器中运行嵌入式 YouTube 视频时iframe，我的控制台中出现以下错误：

www-widgetapi.js:581 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://symfony.XXXXXX.com').

我提供的网页包含iframewho'ssrc属性设置为 YouTube 视频的 URL，以及 URL 搜索参数中的几个设置，包括origin设置为我的网页 URL 的参数。这是iframe：

"<iframe width="480" height="390" frameborder="0"
         src="https://www.youtube.com/embed/rs50Ie1dHXg?autohide=1&autoplay=1&cc_load_policy=0&controls=0&disablekb=1&enablejsapi=1&fs=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0&start=0&widgetid=1&origin=https://symfony.XXXXXX.com"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>"

在执行以下语句后，我已经针对 YouTube 对象内容验证了上述内容，并且 YouTube API 对象正确具有上述值。以下是我用来创建 YouTube API 对象的语句：

const IFRAME = document.querySelector( 'iframe#YouTube-Player.YouTube-iframe' );
const $IFRAME = $( IFRAME );

var switches = { 'autohide' :       1,   'autoplay' :       1,
                 'cc_load_policy' : 0,   'controls' :       0,
                 'disablekb' :      1,   'enablejsapi' :    1,
                 'fs' :             0,   'iv_load_policy' : 3,
                 'modestbranding' : 1,   'rel' :            0,
                 'showinfo' :       0,   'start' :          0,
                 'widgetid' :       1,
                 'origin' :         window.location.origin };

//
// In my code I have a function that reads the switches object and assigns its
// contents them as a string to the iframe's src attribute, but for simplicity,
// I'm assigning that content directly to the end of the YouTube Video URL that
// I'm setting the iframe's src attribute to.
//

var str_switches = '?autohide=1&autoplay=1' +
                   '&cc_load_policy=0&controls=0' +
                   '&disablekb=1&enablejsapi=1' +
                   '&fs=0&iv_load_policy=3' +
                   '&modestbranding=1&rel=0' +
                   '&showinfo=0&start=0' +
                   '&widgetid=1' +
                   '&origin=https://symfony.######.com";

IFRAME.src = 'https://www.youtube.com/embed/rs50Ie1dHXg' +
             '?autohide=1&autoplay=1' +
             '&cc_load_policy=0&controls=0' +
             '&disablekb=1&enablejsapi=1' +
             '&fs=0&iv_load_policy=3' +
             '&modestbranding=1&rel=0' +
             '&showinfo=0&start=0' +
             '&widgetid=1' +
             '&origin=https://symfony.######.com";

var youtubePlayer = new YT.Player( 'YouTube-Player',
                                   { videoId :    'rs50Ie1dHXg',
                                     width :      Math.max( IFRAME.clientWidth,
                                                            $IFRAME.width() ),
                                     height :     Math.max( IFRAME.clientHeight,
                                                            $IFRAME.height() ),
                                     name :       'a_blank',
                                     playerVars : switches,
                                     events :     { 'onError' :      onError,
                                                    'onReady' :       onPlayerReady,
                                                    'onStateChange' : onPlayerStateChange }
                                                  } );

我没有显示onError、onPlayerReady和onStateChange事件处理程序，但它们可以工作，视频播放，并且onPlayerReady和onStateChange事件处理程序函数被正确调用，允许我在视频播放、暂停和结束时监控视频的进度。

正如其他人已经说过的那样，此消息具有误导性。是的，除非我从 YouTube 网站运行我的网站，否则我的网站origin不会与目标匹配origin。很明显，YouTube API 抱怨的是别的东西。

我查看了有关此主题的所有 Stack Overflow 问题，以及我在 Internet 上可以找到的内容，但要么没有任何答案，要么给出的答案不适用，要么尝试了一些似乎有帮助的方法，没有解决我遇到的错误，包括我需要使用 HTTPS URL 运行我的网站，而只是省略了origin参数。

为什么会发生Failed to execute postMessage...错误以及它对我监控和控制视频播放的能力有什么影响。

谢谢你。

标签： javascriptvideoyoutube-api