我相信这是一个问题与目标来源是https。我怀疑这是因为你的iFrame url使用的是http而不是https。尝试将您要嵌入的文件的url更改为https。

例如:

'//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

是:

'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

我认为错误的描述是误导性的，最初与玩家对象的错误使用有关。

当切换到滑动条中的新视频时，我也遇到了同样的问题。

当简单地使用这里描述的player.destroy()函数时，问题就消失了。

尝试使用window.location.href作为url来匹配窗口的原点。

我也有同样的问题，原来是因为我有Chrome扩展“HTTPS无处不在”运行。禁用扩展解决了我的问题。

设置这个似乎可以解决这个问题:

  this$1.player = new YouTube.Player(this$1.elementId, {
    videoId: videoId,
    host: 'https://www.youtube.com',

您可以将JavaScript保存到本地文件:

https://www.youtube.com/player_api https://s.ytimg.com/yts/jsbin/www-widgetapi-vfluxKqfs/www-widgetapi.js

在第一个文件中，player_api放入以下代码:

if(!window.YT)var YT={loading:0,loaded:0};if(!window.YTConfig)var YTConfig={host:"https://www.youtube.com"};YT.loading||(YT.loading=1,function(){var o=[];YT.ready=function(n){YT.loaded?n():o.push(n)},window.onYTReady=function(){YT.loaded=1;for(var n=0;n<o.length;n++)try{o[n]()}catch(i){}},YT.setConfig=function(o){for(var n in o)o.hasOwnProperty(n)&&(YTConfig[n]=o[n])}}());

在第二个文件中，找到代码:this.a.contentWindow.postMessage(a,b[c]);

将其替换为:

if(this._skiped){
    this.a.contentWindow.postMessage(a,b[c]); 
}
this._skiped = true;

当然，你也可以将其串联成一个文件——这样会更有效率。 这不是一个完美的解决方案，但它是有效的!

My Source: yt_api-concat

这一错误与Youtube在“在某些网站或应用程序上播放”时屏蔽内容有关。更确切地说，是WMG(华纳音乐集团)。

然而，错误消息确实表明，将https iframe导入到http站点是问题所在，在这种情况下并不是这样。

我得到了同样的错误。我的错误是enablejsapi=1参数在iframe src中不存在。

只需要在播放器的paramVars属性中添加参数“origin”和你网站的URL，就像这样:

this.player = new window['YT'].Player('player', {
    videoId: this.mediaid,
    width: '100%',
    playerVars: { 
        'autoplay': 1,
        'controls': 0,
        'autohide': 1,
        'wmode': 'opaque',
        'origin': 'http://localhost:8100' 
    },
}

删除DNS预取可以解决此问题。

如果你使用WordPress，在主题的functions.php中添加这一行

remove_action( 'wp_head', 'wp_resource_hints', 2 );

你可以改变你的iframe像这样，并添加原点为您当前的网站。它解决了我浏览器上的错误。

<iframe class="test-testimonials-youtube-group"  type="text/html" width="100%" height="100%"
  src="http://www.youtube.com/embed/HiIsKeXN7qg?enablejsapi=1&origin=http://localhost:8000"
  frameborder="0">
</div>

裁判:https://developers.google.com/youtube/iframe_api_reference # Loading_a_Video_Player

确保你从一个URL加载，比如:

https://www.youtube.com/embed/HIbAz29L-FA?modestbranding=1&playsinline=0&showinfo=0&enablejsapi=1&origin=https%3A%2F%2Fintercoin.org&widgetid=1

注意“origin”组件，以及“enablejsapi=1”。原点必须与您的域相匹配，然后它将被列入白名单并工作。

可能有以下任何一种情况，但它们都导致DOM在被javascript访问之前没有加载。

所以在真正调用JS代码之前，你必须确保以下几点: *确保在任何javascript调用之前容器已经加载 *确保目标URL被加载到任何容器中

我遇到了类似的问题，但在我的本地，当我试图让我的Javascript在主页onLoad之前运行良好，导致错误消息。我已经通过简单地等待整个页面加载，然后调用所需的函数来修复它。

你可以简单地通过添加一个超时函数当页面已经加载并调用你的onload事件来做到这一点:

窗口。Onload =新函数(){ setTimeout(函数(){ //一些onload事件 }, 10); ｝

这将确保你正在尝试的东西将在onLoad触发后很好地执行。

我的是:

<youtube-player
  [videoId]="'paxSz8UblDs'"
  [playerVars]="playerVars"
  [width]="291"
  [height]="194">
</youtube-player>

我只是用playerVars删除了这一行，它在主机上没有错误。

你可以试试:

document.getElementById('your_id_iframe').contentWindow.postMessage('your_message', 'your_domain_iframe')

我也面临着同样的问题，然后我访问了Youtube官方Iframe Api，在那里我发现了这个:

用户的浏览器必须支持HTML5的postMessage特性。大多数现代浏览器都支持postMessage

而彷徨看到的官方页面也面临着这个问题。只需访问官方Youtube Iframe Api，查看控制台日志。我的Chrome版本是79.0.3945.88。

当您在调用window.postMessage()时没有指定targetOrigin时，也会收到此消息。

在本例中，我们向第一个iFrame发送消息，并使用*作为目标，这应该允许与任何targetOrigin通信。

window.frames[0].postMessage({
                    message : "Hi there",
                    command :"hi-there-command",
                    data : "Some Data"
                }, '*')

至少在我的实例中，这似乎是一个无害的“未准备好”条件，API会不断重试，直到成功为止。

我在任何地方都能找到2到9个(在我最糟糕的测试中，通过蜂窝热点打开了20个标签的2009年的《化石书》)....但之后视频功能正常。一旦它运行我的postmessage基于调用seekTo肯定工作，还没有测试其他。

在某些情况下(正如一个评论者提到的)，这可能是由于你在DOM中移动播放器，如追加等。

为了避免控制台错误，我使用了类似Artur之前回答的方法来解决这个问题，以下步骤:

Downloaded the YouTube Iframe API (from https://www.youtube.com/iframe_api) to a local yt-api.js file. Removed the code which inserted the www-widgetapi.js script. Downloaded the www-widgetapi.js script (from https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl7VfO1r/www-widgetapi.js) to a local www-widgetapi.js file. Replaced the targetOrigin argument in the postMessage call which was causing the error in the console, with a "*" (indicating no preference - see https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). Appended the modified www-widgetapi.js script to the end of the yt-api.js script.

这不是最好的解决方案(修补本地脚本来维护，失去对消息发送位置的控制)，但它解决了我的问题。

在使用此解决方案之前，请参阅此处关于删除targetOrigin URI的安全警告- https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

修复了yt-api.js的例子

在我的情况下，这与延迟加载iframe有关。删除iframe HTML属性loading="lazy"为我解决了这个问题。

添加= $ {window.location起源。Host}或“*”是不够的。

在它之前添加https://，它就可以工作了。

另外，确保您使用的是一个可以嵌入的URL:去掉视频ID，并连接一个包含YouTube视频前缀和视频ID +嵌入定义的字符串。

它看起来只是一个Chrome安全系统，阻止重复请求，使用CORB。

https://www.chromestatus.com/feature/5629709824032768

在我的案例中，YouTube在第一次加载相同的网页后阻止访问，该网页有许多视频API数据请求，高负载。

对于负载较低的页面，则不会出现此问题。

在Safari和其他非基于Chronuim的浏览器中，不会出现此问题。

如果我在新的浏览器中加载网页，问题不会发生，当我重新加载同一页面时，问题就出现了。

这帮助了我(Vue.js)

在vue-youtube上找到

mounted() {
  window.YTConfig = {
    host: 'https://www.youtube.com/iframe_api'
  }
  const host = this.nocookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com'

  this.player = player(this.$el, {
    host,
    width: this.width,
    height: this.height,
    videoId: this.videoId,
    playerVars: this.playerVars
  })
  ...
}

更新: 像这样神奇地工作:

...
youtube(
  video-id="your_video_code_here"
  nocookie
)
...
data() {
  return {
    playerVars: {
      origin: window.location.href,
    },
  };
},

我想我们可以定制YT的sendMessage。球员

playerOptions.playerVars.origin = window.location.origin or your domain.
this.youtubePlayer = new YT.Player(element,playerOptions);
this.youtubePlayer.sendMessage = function (a) {
   a.id = this.id, a.channel = "widget", a = JSON.stringify(a);
   var url = new URL(this.h.src), origin = url.searchParams.get("origin");
   if (origin && this.h.contentWindow) {
       this.h.contentWindow.postMessage(a, origin)
   }
}

我在我的项目中使用了这个函数来求解。

扩展上面@Hokascha的回答，对我来说也是惰性加载，被WordPress自动添加。这段代码将删除站点iframes上的所有延迟加载(添加到functions.php):

function disable_post_content_iframe_lazy_loading( $default, $tag_name, $context ) {
    if ( 'iframe' === $tag_name ) {
        return false;
    }
    return $default;
}
add_filter('wp_lazy_loading_enabled', 'disable_post_content_iframe_lazy_loading', 10, 3);

我在尝试嵌入一个条纹定价表时得到了类似的错误消息:

通过自定义WordPress短代码通过PHP添加嵌入代码 或者使用JavaScript动态地将代码追加到页面(即使使用setTimeout()延迟来确保DOM被加载也不起作用)。

我可以在我的WordPress网站上解决这个问题，方法是在块编辑器中使用纯html代码将代码添加到WordPress页面本身。