html youtube iframe api background video code example

Example: youtube as background video website

// HTML
<div class="embed-container">
	<iframe src="https://www.youtube.com/embed/9QTojZVR_Ec?controls=0&autoplay=1&mute=1" frameborder="0" mute="1" allow="autoplay;encrypted-media"></iframe>
</div>

// CSS
@media (min-aspect-ratio: 16/9) {
  .embed-container iframe {
    height: 56.25vw;
    width: 100vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .embed-container iframe {
    width: 177.78vh;
    height: 100vh;
  }
}
div.embed-container {
  z-index: -99;
  position: absolute;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
div.embed-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// or... SASS (same as CSS but different syntax)
@media (min-aspect-ratio: 16/9)
  .embed-container iframe
    height: 56.25vw
    width: 100vw

@media (max-aspect-ratio: 16/9)
  .embed-container iframe
    width: 177.78vh
    height: 100vh

div.embed-container
  z-index: -99
  position: absolute
  overflow: hidden
  width: 100vw
  height: 100vh
  iframe
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)