JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_container ">
<video id="video" width="" height="" loop="loop" autoplay="" controls="none">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
    <div id="overlay"></div>
    <div id="content">
        <p>My Custom Content</p>
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Ursus_arctos_-_Norway.jpg/200px-Ursus_arctos_-_Norway.jpg" />    
    </div>
</div>

CSS

body { background-color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000; margin: 0; padding: 0; overflow: hidden; }
#main_container { float: left; position: relative; width: 100%; height: 100%; background-color: #000000; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%; min-width: 100%; z-index: 9997; }
        #content{ position: absolute; left: 100px; top: 100px; min-height: 100%; min-width: 100%; z-index: 9999; }
p {font-size:22px; color:#fff;}
#overlay {
            position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 9998; }

JavaScript

$(document).ready(function() {
    var windowH =  $(window).height();
    $('#main_container, #overlay').height(windowH);
    $(window).resize(function () {
        var windowH =  $(window).height();
        $('#main_container, #overlay').height(windowH);
    });
});