Youtube IFrame API Unable to post message Issue

YouTube IFrame Player API 提供了簡單的介面及方法，讓網站可以快速整合 Youtube 影片，但是不得不說 Google 針對 Youtube API 時常改版，所以就會常常碰道友時候可以動，有時後不可以動。Youtube 在 2011 公告開始支援 https protocol，所以現在很多網站存取 Youtube API 時，都會使用底下寫法

也就是你的網站只支援

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

setTimeout(function(){
    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 解答區，大致上是這樣。

See also