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; }
JAVASCRIPT
Expand for more options Login