Full screen Video with an Overlay
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;
}
<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>