2016年6月14日 星期二

如何嵌入 YouTube 影片設定自動重播、隱藏 Logo 或靜音播放?


參考-->>https://free.com.tw/embed-a-youtube-video-with-sound-muted/

嵌入 YouTube 影片設定自動重播、隱藏 Logo 或靜音播放? 很多時候我們想在網站內嵌入影片,或者把它做為類似宣傳看板播放,自動播放、靜音及重複循環就是非常必備的!以下這段程式碼,只要照著教學修改使它符合你的需求即可。


step1:
開啟你要嵌入網站或部落格的 YouTube 影片,網址 https://www.youtube.com/watch?v= 後方字串就是該影片的 ID,稍後我們會需要用到它(例如下圖選取的部分)。





step2:
接著複製以下程式碼,將「YOUR_VIDEO_ID」部分以你剛才複製的影片 ID 取代。如果你需要修改各項設定值,我也已經將程式碼註解翻譯成中文,應該會更容易理解。若你要用於部落格平台或架站服務的話,記得一定要支援 JavaScript 程式碼否則無法使用。

<div id="muteYouTubeVideoPlayer"></div>

<script async src="https://www.youtube.com/iframe_api"></script>
<script>
 function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('muteYouTubeVideoPlayer', {
    videoId: 'YOUR_VIDEO_ID', // YouTube 影片ID
    width: 560,               // 播放器寬度 (px)
    height: 316,              // 播放器高度 (px)
    playerVars: {
      autoplay: 1,        // 在讀取時自動播放影片
      controls: 1,        // 在播放器顯示暫停/播放按鈕
      showinfo: 0,        // 隱藏影片標題
      modestbranding: 1,  // 隱藏YouTube Logo
      loop: 1,            // 讓影片循環播放
      fs: 0,              // 隱藏全螢幕按鈕
      cc_load_policty: 0, // 隱藏字幕
      iv_load_policy: 3,  // 隱藏影片註解
      autohide: 0         // 當播放影片時隱藏影片控制列
    },
    events: {
      onReady: function(e) {
        e.target.mute();
      }
    }
  });
 }

 // Written by @labnol
</script>

===================以下為範例影片===========================