Youtube IFrame API Unable to post message Issue

Solid_color_You_Tube_logo

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