JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div id="container">

        <div class="grid"></div>

        <!-- BG-VIDEO -->

        <video autoplay loop muted>
            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
        </video>
        <div class="content">
            <center>
                <div class="titlebox">
                    <h1>The Redtree Cafe</h1>
                </div>
            </center>
        </div>



    </div>

CSS

*{
    margin: 0;
    padding: 0;
}

body {
    background: #ccc;
}

/* VIDEO */

#container {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}


.grid {
    background: url(http://i.stack.imgur.com/nVd1O.png);
    width: 100%;
    height: 100vh;
    z-index: 1000;
    
    /* this is the key*/
    position: absolute;
}

/*Front Page*/

.titlebox {
    z-index: 2000;
}