これは私が得るエラーメッセージです:
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').
私は、ターゲットOriginがhttp://www.youtube.com
で受信者Originがhttps://www.youtube.com
である他の同様の問題を見ましたが、ターゲットがhttps://www.youtube.com
であり、Originがhttp://localhost:9000
である私のようなものはありません。
私はこれがターゲットOriginがhttps
である問題であると思います。あなたのiFrame URLがhttp
の代わりにhttps
を使用しているためだと思います。埋め込みようとしているファイルのURLをhttps
に変更してみてください。
例えば:
var id = getId(url);
return '//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&Origin=http://localhost:9000';
}
することが:
var id = getId(url);
return 'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&Origin=http://localhost:9000';
}
次のように、プレーヤーのparamVars
属性に、サイトのURLを含むパラメータ"Origin"
を追加するだけです。
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',
ローカルファイルに保存できます。
最初のファイルに、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;
もちろん、uは1つのファイルに連結できます - より効率的になります。これは完璧な解決策ではありませんが、うまくいきます。
私の情報源: yt_api-concat
シモンズ:すみません、英語は私の最初の言語ではありません。
次のようなURLからロードしていることを確認してください。
「Origin」コンポーネントと「enablejsapi = 1」に注意してください。オリジンはあなたのドメインが何であるかを一致させなければなりません、そしてそれはそれからホワイトリストに載せられてそして働くでしょう。
ウィンドウのOriginと一致するURLにwindow.location.href
を使用してみてください。
私は同じエラーを受けました。私の間違いは、enablejsapi=1
パラメーターがiframe
srcに存在しないことです。
エラーの説明は誤解を招くものであり、元々はプレーヤーオブジェクトの誤った使用方法に関連していると思います。
スライダーで新しいビデオに切り替えたときも同じ問題がありました。
ここで説明されているplayer.destroy()
関数 を単に使用すると 、問題は解決しました。
私はこれと同じ問題を抱えていました、そしてそれは私がChromeエクステンション "HTTPS Everywhere"を実行していたためであることが判明しました。拡張機能を無効にすることで私の問題は解決しました。
DNSプリフェッチを削除すると、この問題は解決します。
WordPressを使用している場合は、テーマのfunctions.phpにこの行を追加してください。
remove_action( 'wp_head', 'wp_resource_hints', 2 );
Iframeをこのように変更して、Originを現在のWebサイトにすることができます。それは私のブラウザのエラーを解決します。
<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
この特定のエラーは、「特定のサイトまたはアプリケーションで再生したとき」のYoutubeによるコンテンツブロックに関連していました。より具体的にはWMG(Warner Music Group)による。
ただし、このエラーメッセージは、httpサイトへのhttps iframeのインポートが問題であることを示唆していましたが、この場合は問題ありませんでした。
以下のいずれかがある可能性がありますが、それらのすべてが、JavaScriptによってアクセスされる前にロードされていないDOMにつながります。
実際にJSコードを呼び出す前に確認する必要があるのは、次のとおりです。* JavaScriptが呼び出される前に、コンテナが読み込まれていることを確認します。*ターゲットURLが必要なコンテナに読み込まれていることを確認します。
私は私のJavascriptをエラーメッセージの原因となるメインページのonLoadよりもずっと前に実行させようとしているときに同じ問題に出会ったが、私のローカルでそうした。ページ全体がロードされるのを待ってから必要な関数を呼び出すだけで修正できました。
ページがロードされたときにタイムアウト関数を追加してonloadイベントを呼び出すことで、これを簡単に実行できます。
window.onload = new function(){setTimeout(function(){//いくつかのonloadイベント}、10); }
これは、onLoadがトリガーされた後に、あなたが試みていることがうまく実行されることを保証します。