html 带有YouTube视频的全尺寸，循环背景视频

Posted 2021-05-11

<style>
  .bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
  }

  .bg-video #player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
  }

  .bg-video .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
  }

  h1 {
    color: white;
    text-align: center;
    margin-top: 35vh;
    font-size: 64px;
    text-shadow: 1px 1px 3px black;
  }
</style>

<div class="bg-video">
  <div class="overlay"></div>
  <div id="player"></div>
</div>

<h1>Hello World</h1>

<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('player', {
      videoId: 'LS-ErOKpO4E',
      playerVars: {
        autoplay: 1,
        controls: 0,
        modestbranding: 1,
        loop: 1,
        playlist: 'kNizPk7xBbs'
      }
    });
  }
</script>