JSFiddle - React, Tailwind, and code Playground

by Oleh Kotsubko

HTML

<div class="video">    <iframe
 src="//player.vimeo.com/video/82123812?title=0&amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;loop=1"
 width="960" height="540" frameborder="0" webkitallowfullscreen
 mozallowfullscreen allowfullscreen autoplay mute></iframe>   <div
 class="overlay"></div> </div>

CSS

body {
    margin: 0;
    padding: 0;
}
.video {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%}
    
    .video iframe {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        }
    
    .video .overlay {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 0, 0, 0.5);
        }