Full screen Video with an Overlay

full-video.html

<div class="container">
<video poster="poster.png" autoplay="true" loop>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>
<div class="overlay">lorem </div>
</div>

video.css

body, html {
  margin: 0;
  padding: 0;
}

video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
}

.overlay {
  z-index: 2;
  position: absolute;
  background: rgba(0,0,0,0.2);
  top: 0; bottom: 0; left: 0; right: 0;
}