「DOMWindow」で「postMessage」を実行できませんでした：https://www.youtube.com！== http：// localhost：9000

これは私が得るエラーメッセージです：

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

ターゲットの起点がhttp://www.youtube.comあり、受信者の起点が他にもある他の同様の問題を見たことがありますhttps://www.youtube.comが、ターゲットがhttps://www.youtube.comあり、起点がどこにあるのかはわかりませんhttp://localhost:9000。

1. 問題はありません。何が問題ですか？
2. どうすれば修正できますか？

これは、ターゲットの起点がである問題だと思います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';

次のように、プレーヤー"origin"のparamVars属性にサイトの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' },
}

これを設定するとそれを修正するようです：

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

2番目のファイルに、コードを見つけます。 this.a.contentWindow.postMessage(a,b[c]);

そしてそれを次のものに置き換えます：

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

もちろん、1つのファイルに連結することもできます-より効率的です。これは完璧な解決策ではありませんが、うまくいきます！

私のソース：yt_api-concat

次のような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」に注意してください。オリジンはドメインと一致している必要があり、ホワイトリストに登録されて機能します。

window.location.hrefウィンドウの原点と一致するURLを使用してみてください。

同じエラーが発生しました。私の間違いは、enablejsapi=1パラメーターがiframesrcに存在しないことでした。

エラーの説明は誤解を招くものであり、元々はプレイヤーオブジェクトの誤った使用に関係していると思います。

スライダーで新しい動画に切り替えると、同じ問題が発生しました。

ここで説明するplayer.destroy()関数を単純に使用すると、問題はなくなります。

同じ問題がありましたが、それはChrome拡張機能「HTTPS Everywhere」を実行していることが原因であることがわかりました。拡張機能を無効にすると、問題が解決しました。

この正確なエラーは、「特定のサイトまたはアプリケーションで再生された」ときのYouTubeによるコンテンツブロックに関連していました。より具体的には、WMG（Warner Music Group）によるものです。

ただし、エラーメッセージは、httpサイトへのhttps iframeインポートが問題であることを示唆しており、この場合は問題ではありませんでした。

DNS Prefetchを削除すると、この問題が解決します。

WordPressを使用している場合は、この行をテーマのfunctions.phpに追加します

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

このようにiframeを変更し、現在のWebサイトになるようにoriginを追加できます。ブラウザのエラーを解決します。

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

ref：https : //developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

次のいずれかが考えられますが、それらはすべて、JavaScriptでアクセスされる前にロードされないDOMにつながります。

したがって、実際にJSコードを呼び出す前に確認する必要があるのは次のとおりです。

私は同様の問題に遭遇しましたが、メインページのonLoadの前にJavascriptを実行しようとすると、ローカルでエラーメッセージが表示されます。ページ全体が読み込まれるのを待って、必要な関数を呼び出すだけで修正しました。

これは、ページが読み込まれたときにタイムアウト関数を追加して、次のようにonloadイベントを呼び出すだけで実行できます。

window.onload = new function（）{setTimeout（function（）{//いくつかのonloadイベント}、10）; }

これにより、onLoadがトリガーされた後も、実行しようとしているものが確実に実行されます。

への呼び出しでtargetOriginを指定しない場合にも、このメッセージが表示されますwindow.postMessage()。

この例では、最初のiFrameにメッセージを投稿*し、targetOriginとの通信を許可するターゲットとして使用します。

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

私の場合、少なくとも、これは無害な「準備ができていない」状態のようで、APIが成功するまでAPIが再試行します。

私はこれらの2つから9つまでを取得します（私の最悪のケースのテスターでは、20のタブがセルラーホットスポットを介して開いている2009 FossilBook）...。しかし、ビデオは正しく機能します。それが実行されたら、seekToへの私のpostMessageベースの呼び出しは確実に機能し、他のテストは行っていません。

場合によっては（1人のコメンターが述べたように）、プレーヤーをDOM内appendなどでDOM内で移動した場合などに発生することがあります。

あなたが試すことができます ：

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

私も同じ問題に直面していたので、公式のYouTube iframe Apiにアクセスしました。

ユーザーのブラウザーは、HTML5 postMessage機能をサポートしている必要があります。最新のブラウザのほとんどはpostMessageをサポートしています

そして、公式ページもこの問題に直面しているのを見てさまよう。ただ、訪問公式YouTubeのインラインフレームアピとコンソールログを参照してください。Chromeのバージョンは79.0.3945.88です。

私のものは：

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

playerVarsで行を削除したところ、コンソールでエラーが発生することなく動作しました。