Centered fullscreen video with a partially transparent png overlay.
HTML
<div class="video">
<video muted id="video_background" autoplay="autoplay" loop="loop">
<source src="https://serials.dieselpunkindustries.com/video/rocket.mp4" type="video/mp4">
</video>
</div>
<div class="screen"></div>
CSS
.video{
position: fixed;
height: 100%;
width: 100%;
background-color: #000;
}
#video_background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
transform: translateX(calc((100% - 100vw) / 2));
}
.screen{
position: fixed;
height: 100vh;
width: 100%;
opacity: 1;
z-index: 999;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-image: url(https://tv.dieselpunkindustries.com/img/screen.png);
z-index: 999;
}
