html嵌入youtube影片當背景，並靜音

網路上看到至少三種以上教學，我依序放上我試過的：

首先，先知道影片內容，

https://www.youtube.com/watch?v=YrLk4vdY28Q

watch?v=XXXXXXXXX，後面即為id

若後面還有?rel或什麼什麼的，一律不管刪掉

第一種，簡單嵌入式，用div控制大小，並用iframe的參數來控制影片

來源：https://blog.allenchou.cc/youtube-video-background/

----------
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
  <iframe frameborder="0" height="100%" width="100%" src="我的影片?autoplay=1&controls=0&showinfo=0&autohide=1" frameborder="0" allowfullscreen>
</iframe>
</div>
<div id="muteYouTubeVideoPlayer"></div>

------------

在src來源的部份，有autoplay，controls，showinfo，autohide這些

autoplay //在讀取時自動播放影片 0為不播放

controls //在播放器顯示暫停／播放按鈕 0為不出現

showinfo //隱藏影片標題 1為不出現

autohide //播放影片時隱藏影片控制列 0為不出現

fs //顯示全螢幕按鈕 0為不出現

loop //循環播放 0為不循環

但，以上的問題就是沒有靜音功能…

然後，找到一個網站，在iframe上設定參數，增加一個volumn="0" 如下

<iframe width="640" height="360" src="[YouTube Video URL]?rel=0&loop=1&playlist=影片ID" frameborder="0" allowfullscreen volumn="0"></iframe>

看來沒作用，只好找第二種方式了

第二種，嵌入並使用youtube API，這個很行

來源：https://www.labnol.org/internet/embed-mute-youtube-video/29149/

<script async src="https://www.youtube.com/iframe_api"></script>

<script>

 function onYouTubeIframeAPIReady() {

  var player;

  player = new YT.Player('muteYouTubeVideoPlayer', {

    videoId: 'PbJ9vJCBC_4', // YouTube 影片ID

    width: 560,               // 播放器寬度 (px)

    height: 316,              // 播放器高度 (px)

    playerVars: {

      autoplay: 1,        // 在讀取時自動播放影片

      controls: 1,        // 在播放器顯示暫停／播放按鈕

      showinfo: 0,        // 隱藏影片標題

      modestbranding: 1,  // 隱藏YouTube Logo

      loop: 1,            // 影片循環播放

      fs: 1,              // 顯示全螢幕按鈕

      cc_load_policty: 0, // 隱藏字幕

      iv_load_policy: 3,  // 隱藏影片註解

      autohide: 0         // 播放影片時隱藏影片控制列

    },

    events: {

      onReady: function(e) {

        e.target.mute();

      }

    }

  });

 }

 // Written by @labnol 

</script>

但，他的寬度設在程式裡，沒有百分比啊！？！？

那要全螢幕就得另外花功夫去設定了，

應該是可以，但…改天再試

第三種，也是最後用的，也是利用youtube API

來源：http://iwsc.nkfust.edu.tw/files/14-1049-42737,r617-1.php

<p>

<iframe id="ytplayer" width="640" height="480"

src="https://www.youtube.com/embed/djmAMBpSevo?&amp;html5-1&amp;enablejsapi=1&amp;autoplay=1"

frameborder="0" allowfullscreen=""></iframe></p>

<div id="player">&nbsp;</div>

<script>

 var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;

    function onYouTubeIframeAPIReady() {

        player = new YT.Player('ytplayer', {

            events: {

                'onReady': onPlayerReady

            }

        });

    }

function onPlayerReady() {

        player.playVideo();

        // Mute!

        player.mute();

    }

</script>

把iframe寬及高設為100%，外面再包覆一層，就完全了靜音！！

偉哉！！