使用 YouTube Player API 控制 YouTube 影片，包括自動播放、隱藏按鈕、隱藏影片標題、隱藏 YouTube Logo、循環播放…等。

Step 1. 載入 js

1
<div id="player"></div>
1
2
3
4
5
6
7
var initYoutubeVideo = function(argument) {
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";

  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
};

Step 2. 設定 YouTube 影片參數

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var onYouTubeIframeAPIReady = function() {

  var player = new YT.Player('player', {
    videoId: 'YOUR_VIDEO_ID', // YouTube 影片ID.
    width: 560,               // 播放器寬度 (px).
    height: 316,              // 播放器高度 (px).
    playerVars: {
      rel: 0,                 // 是否顯示片尾推薦影片.
      autoplay: 0,            // 是否在讀取時自動播放影片.
      controls: 1,            // 是否在播放器顯示暫停／播放按鈕.
      showinfo: 0,            // 是否隱藏影片標題.
      modestbranding: 0,      // 是否隱藏 YouTube Logo.
      loop: 0,                // 是否讓影片循環播放.
      fs: 0,                  // 是否隱藏全螢幕按鈕.
      cc_load_policty: 0,     // 是否隱藏字幕.
      iv_load_policy: 3,      // 是否隱藏影片註解.
      autohide: 0             // 是否在播放影片時隱藏影片控制列.
    },
    events: {
      onStateChange: function(event) {
        if (event.data == YT.PlayerState.PLAYING) {
          // 開始播放.
        }
      }
    }
  });
};

如果要做一些簡單的事件觸發或是監聽事件，可以在 onStateChange 裡設定。

參考資料