Quantcast
Channel: 小惡魔 – 電腦技術 – 工作筆記 – AppleBOY
Viewing all articles
Browse latest Browse all 325

Youtube IFrame API Unable to post message Issue

$
0
0
Solid_color_You_Tube_logo

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

<script>
      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

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 解答區,大致上是這樣。


Viewing all articles
Browse latest Browse all 325