YouTube Embedded Video JavaScript API未能在DOMSWindow上执行postMessage，目标源代码不'；不匹配

当我在Chrome浏览器中使用YouTube embedded video JavaScript API运行带有

iframe

的嵌入式YouTube视频时，我的控制台中出现以下错误：

www-widgetapi.js:581未能在“DOMWindow”上执行“postMessage”：提供的目标源（'https://www.youtube.com“”与收件人窗口的来源不匹配（'https://symfony.XXXXXX.com）

我正在为包含

iframe

who's

src

属性的网页提供服务，该属性设置为YouTube视频的URL以及URL搜索参数中的若干设置，包括设置为我的网页URL的

origin

参数。以下是

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>"

我没有显示

onError

、

onPlayerReady

和

onStateChange

事件处理程序，但它们可以工作，视频播放和

onPlayerReady

，以及

onStateChange

事件处理程序函数都被正确调用，允许我在视频播放、暂停时监控视频的进度，和完成

正如其他人已经说过的那样，这一信息具有误导性。是的，除非我是从YouTube站点运行我的站点，否则我的站点的

源站

不会与目标

源站

匹配。很明显，YouTube API在抱怨其他事情

我查看了关于这个主题的所有堆栈溢出问题，以及我在互联网上可以找到的问题，但要么没有任何答案，给出的答案不适用，要么尝试了一些似乎有用的方法，没有解决我遇到的错误，包括我需要使用HTTPS URL运行我的网站，只需省略

origin

参数

为什么无法执行postMessage。。。发生错误，对我监视和控制视频播放的能力有何影响

---

谢谢。

同样的问题。令人惊讶的是，还没有人回答这个问题。我找到的每一个答案都说确保源和目标都是HTTPS。但是，你和我的问题都不是这样。你找到解决办法了吗？

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 }
                                                  } );