CH3-4 video fullscreen banner

全畫面的video banner

HTML

<section class="container-fluid full_video">
  <div class="video_bg">
    <!--youtube連結版本-->
    <div class="youtube">
        <div id="player"></div>
    </div>    
    <!--網站上傳mp4版本-->
    <video autoplay loop muted >
                  <source src="video/NoahArkBoxwateractivitiesvideo.mp4" type="video/mp4">
    </video>
  </div>
</section>

CSS

/*最外層包住影片的設定高度，多餘的隱藏，可自行調整影片可視區塊高度*/
.full_video{
    width: 100%;
    padding: 0;
    height:100vh;
    overflow: hidden;
}    
/*最外層與影片中間夾一層來操作影片的上下左右移動*/
.video_bg{
    position: relative;
    width: 100%;
    height: 100%;
}
/*mp4上傳版本的影片CSS調整*/
video { 
    position: fixed;
    /*position: absolute*/
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
      transition: 1s opacity;
}
/*youtube連結的影片版本*/
  .full_video .youtube #player{    
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 150%;
    min-height: 150%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
      transition: 1s opacity;
  }

JS(youtubeAPI崁入)

//youtube撥放器
// 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          playerVars: {
                    //自動撥放
                    autoplay: 1,
                    //循環撥放
                    loop:1,
                    //youtube的play控制條
                    controls: 0,
                    //youtube的左上角影片資訊
                    showinfo: 0,
                    autohide: 1,
                    modestbranding: 1,
                    vq: 'hd1080'
                },
          videoId: '4tkM3i51YEw',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
        //影片靜音
        player.mute();
      }

      //影片撥放完畢不進入推薦相關影片畫面，重新載入同一隻影片
      var done = false;
      function onPlayerStateChange(e) {
        var id = '4tkM3i51YEw';

      if(e.data === YT.PlayerState.ENDED){
          player.loadVideoById(id);
      }

      }
      function stopVideo() {
        player.stopVideo();
      }