Working solution for whole website background,

For the HTML code,

<div class="video-background">
  <iframe src="https://www.youtube.com/embed/QyhrOruvT1c?playlist=QyhrOruvT1c&controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
</div>

It is important to set autoplay=1, playlist=<video id> , and loop=1 .

In the CSS part, we could use the @media to manage the video size depends on the video aspect ratio,

.video-background {
  pointer-events: none;
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;

  iframe {
    position: absolute;
    width: 300vw;   /* use 300vw to hide logos of Youtube, creator, and title */
    height: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* example video is 16:9, change the value depends on your use */
    @media (min-aspect-ratio: 16/9) {
      height: calc(9/16 * 100vw);
    }

    @media (max-aspect-ratio: 16/9) {
      /* match the width trick for hiding logos */
      width: calc(16/9 * 100vh * 3);
    }
  }
}

Live example is as below,

https://codepen.io/chunlaw/pen/PwPxKoj