JSFiddle - React, Tailwind, and code Playground

HTML

<div class="site-container">
    <video id="video" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" autoplay loop muted>
        <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
            <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
                <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
                    <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
    <div class="content">
        <section id="section2"></section>
        <section id="section3"></section>
        <section id="section4"></section>
        <section id="section5"></section>
        <section id="section6"></section>
    </div>
</div>

CSS

video {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    height: auto;
    z-index: -100;
    background: url(http://media.w3.org/2010/05/sintel/poster.png) no-repeat;
    background-size: cover;
}

html, body, .site-container, .content, section {
    height: 100%;
    margin: 0;
    padding: 0;
}

.content {
    z-index: 66;
}
#section2 {
    background: url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

#section3 {
    background: url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

#section4 {
    background: url(http://www.hdwallpapersn.com/wp-content/uploads/2015/04/background_image_9.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

#section5 {
    background: url(http://hdw.datawallpaper.com/abstract/christmas-background-desktop-background-542647.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

#section6 {
    background-color: #0039a6;
    height: 100%;
    color: #fff;
}