JSFiddle - React, Tailwind, and code Playground

HTML

<video id="test" loop autoplay>
    <source src="assets/videos/h264.mp4" type="video/mp4">
    <source src="assets/videos/h264.ogv" type="video/ogv">
    <source src="assets/videos/h264.webm" type="video/webm">
</video>

CSS

#test {
    background:red;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

#test:after {
    content: "";
    background: #000;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    height:100%;
    width:100%;
    z-index:1;
}