YouTube IFrame Player API 提供了簡單的介面及方法,讓網站可以快速整合 Youtube 影片,但是不得不說 Google 針對 Youtube API 時常改版,所以就會常常碰道友時候可以動,有時後不可以動。Youtube 在 2011 公告開始支援 https protocol,所以現在很多網站存取 Youtube API 時,都會使用底下寫法
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
也就是你的網站只支援 http:// 時,就會去讀取 http://www.youtube.com/iframe_api,但是透過 YT.Player 物件來產生多個 Youtube 影音時,就會出現底下錯誤訊息,導致 Javascript API 無法控制 Youtube 影片
Unable to post message to http://www.youtube.com Recipient has origin: https://www.youtube.com/
這問題在 Stackoverflow 被提出來多次,我自己針對 Youtube API 產生下面的解法,只要按照底下方式操作,就不會產生任何錯誤訊息了
1. load iframe api https://www.youtube.com/player_api
2. load iframe src path: https://www.youtube.com/embed/0GN2kpBoFs4?rel=0
如果有使用 YT.Player 動態產生 Youtube 元件,請務必檢查 src 的 protocol
var url = $('#iframe_youtube').prop('src');
if (url.match('^http://') {
$('#iframe_youtube').prop('src', url.replace(/^http:\/\//i, 'https://'));
}
}, 500);
如果確定都是透過 https:// 來跟 Youtube 溝通,那就不會產生 postMessage 無法收到的問題,這解法我也有更新在 Google 論壇上,另外原發問者也有將我提供的解法,轉到 Stackoverflow 解答區,大致上是這樣。