前提・実現したいこと
iframe 組み込みの YouTube Player API リファレンスを見てwebページにyoutube動画を埋め込み、setVolume(0)を使うことで無音で再生できるように設定しました。
動画の数が一つの場合は上記の思惑がうまくいったので、複数動画でも埋め込み&無音再生を試みましたがうまくいきません。
リファレンスのようなコードをもう一回書いた際はページに埋め込みがうまくいきませんでした。
youtubeの共有ボタンからのiframeタグを使った埋め込みをして、その後APIで設定しようと思いましたが複数動画の埋め込みはできても今度は無音再生がうまくいきませんでした。
色々試してもうまくいかなかったので、良い方法があれば教えていただきたいです
よろしくお願いします。
発生している問題・エラーメッセージ
基本的に一つの動画の埋め込みでも、複数でも下記のエラーが出ます。ただ、一つの動画の場合は埋め込み&無音再生が行われています。
最後のorigin('null')の部分はドメインがいるとのことだったので、Web Server for Choromeを使ってhttp://...の状態で実行したのですが結局'null'が'http://...'に置き換わっただけでした。
www-widgetapi.js:546 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('null').
該当のソースコード
以下のような関数onYouTubeIframeAPIReady()を複数記載していけば動画の埋め込みが複数行われていく状態にしたいです
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 一つ目の動画の埋め込み用のdivタグ --> <div id="player"></div> <!-- 二つ目の動画の埋め込み用のdivタグ --> <div id="player1"></div> <script> var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); //一つ目の動画のオブジェクト作成 var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '360', width: '640', videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, } }); } //二つ目の埋め込み動画のオブジェクト作成 var player1; function onYouTubeIframeAPIReady() { player1 = new YT.Player('player1', { height: '360', width: '640', videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, } }); } //無音再生の設定を行う function onPlayerReady(event) { event.target.setVolume(0); } // </script> </body> </html>
試したこと
下記のサイトは参考にして一通り試してみました。
iframe 組み込みの YouTube Player API リファレンス
YOUTUBEのiframeを直書きしてapiを使う方法
YouTubeをミュートで埋め込んだったよ。
YouTube動画を音量ミュートでWEBサイトに埋め込む方法
Youtubeで Failed to execute ‘postMessage’ on ‘DOMWindow’: が止まらない
Youtube貼り付けでJSエラー
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。