Background Video

by Matheus Stein

HTML

<div class="bgVideoContainer">
  <video class="bgVideo"  loop muted autoplay>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
</div>

CSS

body {
	margin: 0;
  width:100%;
  min-height:100%;
}

.bgVideoContainer {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   z-index: -100;
}

.bgVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .bgVideo {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .bgVideo {
    width: 300%;
    left: -100%;
  }
}