YouTube APIで動画を埋め込んだ時にエラーが出る

Question

YouTube APIを使用して動画を埋め込んだ時にコンソールに下記のようなエラーが出てしまいます。

** エラーメッセージ１ **

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

** エラーメッセージ２ **

Error parsing header X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube: insecure reporting URL for secure page at character position 22. The default protections will be applied.

調べてみると下記サイトを見つけたのでできる範囲で試してみたのですが、やり方が違うのか解決できませんでした。

** 参考サイト **
https://stackoverflow.com/questions/27573017/failed-to-execute-postmessage-on-domwindow-https-www-youtube-com-http

エラーをなくすためにはどのような対策を入れる必要があるでしょうか？

現在使用している埋め込み用のJavascriptは下記です。

var youtube_ID = $('#sample').data("video");

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 playerReady = false;
function onPlayerReady(event) {
	playerReady = true;
}

function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player ('sample', {
		width: 640,
		height: 390,
		videoId: youtube_ID,
		playerVars: {
			rel: 0,
			autoplay: 0,
			showinfo: 0,
		},
		events: {
			'onReady': onPlayerReady
		}
	});
}

$(function() {
	$('.yt_btn').click(function() {
		if(playerReady) {
			ytPlayer.playVideo();
			$(this).addClass('yt_play');
		}
	});
});

<div id="sample01" class="ytBtn">
	<div id="sample"></div>
</div>

また、このエラーはYouTube Player API リファレンスのページやYouTube APIの埋め込み方の紹介ページにもでていることがあるようですが、頻発するものなのでしょうか？

ご教示いただけますと幸いです。
何卒よろしくお願いいたします。

Comments

[Lhankor_Mhy]

スタックオーバーフローに書かれている、SSLとnonSSLの混在が原因、という指摘は試してみましたか？

[groco]

すみません、返信が遅くなってしまいました。SSLとnonSSLの混在というのを見かけたので「tag.src = "https://www.youtube.com/iframe_api";」を「tag.src = "http://www.youtube.com/iframe_api";」にしてみたりしてみましたがエラーは消えませんでした。検証方法が間違えていますかね？

[Lhankor_Mhy]

そうでしたか……　このような記事( http://d.hatena.ne.jp/komiyak/20140218/1392709225 )を見つけました。古い記事ですが、関係しそうですか？

[groco]

教えていただいた記事の中にあった「https://developers.google.com/+/quickstart/javascript?hl=ja#step_1_enable_the_google_api」を試しているのですが、step3でハマってしまいまして・・・調べながらもう少しこのページの方法を試してみたいと思います。基本的にYouTube APIなどを使う場合には Google API Console での登録が必要となるでしょうか？

[Lhankor_Mhy]

あ、そうか、必要ないんですね。じゃあ、関係ないのかなあ……？

[groco]

なかなかAPIの扱いは難しいものなのですね・・・。リファレンスのページや、実際にサイト内でYouTubeを使用しているサイトをいくつか探してみたのですが、特に「エラーメッセージ２ 」の方は今見た限りだとYouTubeを再生するとどのサイトでもchromeでは表示されてしまうようでした。再生ができるのであればこれらのエラーはあまり気にしなくても良いものなのでしょうか・・・？

[Lhankor_Mhy]

ごめんなさい、ちょっと私には荷が重い感じです。

[groco]

すみません、何度も返答くださりありがとうございます。

Answer 1

僕もエラーメッセージ1で、困ってstackoverflowなど調べて試したのですが
結果どうにもなりませんでした。

YouTube公式の「YouTube プレーヤーのデモ」ページでもエラーが出るので
もはやどうしようもないのかなと諦めました。
iframe_apiが改修されてエラーが出なくなるの待ちかなと思います。

Comments

[groco]

とても今更ではありますが・・・ご回答、ありがとうございました！
YouTube公式もデモページでも出ているのであれば確かにどうしようもないですね。。。
今、公式のデモページを見てみましたが、まだエラーが出てました。
致命的という内容でもないですし、エラーが出てなくなるのを待ってみます。

Answer 2

head内に

<script src="https://www.youtube.com/iframe_api"></script>

を挿入するとエラー自体は解消されました。

ただし、iframe_api を重複してロードしているような状態なので、気持ち悪い感じがしますが。。

参考：
https://hirokonakahara.com/blog/?p=3974

Comments

[groco]

とても今更ではありますが・・・ご回答、ありがとうございました！
確かに iframe_api を重複してロードしてしまうのは気持ち悪いような、居心地が悪いような気もしますが、こういう対応策があるのですね！
今回は一旦、Youtube公式でもエラー出てるし・・・ということで、対策しない方向となりましたが、解決方法をご提示いただきありがとうございました。
次回同じことが起きて対策が必要となった際にはこちらの方法で対策してみたいと思います。

Answer 3

五月雨で申し訳ございません！

現在の現象について何点か質問があります。

1. youtubeは正常に再生されますか？
2. コンソールエラーが出るブラウザは何ですか？
3. 公式Documentsは読みましたか？
4. ローカル開発環境なのかサーバー上でのエラーなのか？

沢山質問してしまいましたが、答えられる範囲で構いません。
よろしくお願いします。

Comments

[groco]

せっかくご回答くださっていたのに返信ができておらず大変失礼いたしました。
不要カンマの件、ご指摘くださりありがとうございます。
削除しました。
ただ、エラーは変わらず出ていました。

ご質問いただいていた件について回答させていただきます。

> 1. youtubeは正常に再生されますか？
はい、youtubeは正常に再生されています。

> 2. コンソールエラーが出るブラウザは何ですか？
chromeで出ています。
エラーメッセージ１ はfirefoxでも出ていました。

> 3. 公式Documentsは読みましたか？
すみません、ざっとは読んだのですがあまり読み込めていないです。

> 4. ローカル開発環境なのかサーバー上でのエラーなのか？
サーバー上でのエラーです。

お時間ができましたらご回答いただけますと幸いです。
何卒よろしくお願いいたします。

Answer 4

エラー解決とは関係ないとは思いますが、

playerVars: {
 rel: 0,
 autoplay: 0,
 showinfo: 0,
},

showinfoのところはカンマ不要なので削除しときましょう。