スポンサーリンク

YoutubeのAPI使おうとしたら「unable to post message to http://www.youtube.com. recipient has origin https://www.youtube.com」でSafari,Chrome,Firefoxでエラー続出

YoutubeのAPI使おうとしたら

unable to post message to http://www.youtube.com. recipient has origin https://www.youtube.com

と出てSafari,Chrome,Firefoxでエラー続出。
再生はされるのだが、細かな設定ができず、、、
Windowsは問題ないようだ。

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var iframePlayerApiScriptTag = document.getElementsByTagName('script')[0];
iframePlayerApiScriptTag.parentNode.insertBefore(tag, iframePlayerApiScriptTag);
var player;
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
iframe_h = "";
iframe_w = "100%";
}else{
iframe_h = '300';
iframe_w = '400';
}
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: iframe_h,
width: iframe_w,
videoId: 'q6T0wOMsNrI',
playerVars: {
"rel":0,
"showinfo":0,
'modestbranding': 0,
'wmode':"opaque"
},
events:{
'onReady': onPlayerReady
}
});
}function onPlayerReady(event) {
var clickPlay = document.getElementById("movie");
  clickPlay.onclick = function() { this.style.display="none";event.target.playVideo(); }
}
</script>
<div id="movie">
<img src="../img/poster.png">
</div>

わかりやすい症状だと"onReady"や"onStateChange"などのイベントが読み込まれない。
そんなときは、次の一文を、Youtube APIのコードの前につけてみよう。やっとみつけました。

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

参照:(英語がわかる人はこちらへ)http://stackoverflow.com/questions/16050024/youtube-iframe-api-fails-to-post-message

なぜ<script src="https://www.youtube.com/iframe_api"></script>を打つと解消されるのかという原因はわからないが、とにかくこれでクリアできた。
他にもoriginが違いますよ、という警告が出続けているが、もうそれは無理、ということで観念。
試してみてくれよな!

スポンサーリンク