Fullscreen Video Html5

by Marius Jopen

HTML

<header>
  <h1>Sample Title</h1>
  <video autoplay loop class="bg-video">
    <source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
  </video>
</header>

CSS

header {
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  height: 100vh;
  z-index: 0;
}

header h1 {
  text-align: center;
  font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;
  color: #fff
}

header video {
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}