JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css">
<div class="main">
    <div>
        <!-- just to simulate my dom structure -->
    </div>
    <div class="section-area">
        <section id="home">
            <div id="video-wrapper">
                <video width="320" height="240" autoplay="" controls="">
  <source type="video/ogg" src="http://www.w3schools.com/html/movie.ogg"></source>
  <source type="video/mp4" src="http://www.w3schools.com/html/movie.mp4"></source>
  <source type="video/webm" src="http://www.w3schools.com/html/movie.webm"></source>
</video>
            </div>
            <form action="">
                <input type="text">
            </form>
        </section>
        <section>
            <div class="aligner">
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur soluta nisi eligendi quibusdam amet accusamus iste dolorem autem perferendis expedita.</p>
                </div>
            </div>
        </section>
        <section>
            <div class="aligner">
                <div>
                    <p>Dicta totam modi explicabo accusamus vero eum ipsa? Dolore iure optio harum aperiam magni quo fugit tempora vero soluta dolores.</p>
                </div>
            </div>
        </section>
        <section>
            <div class="aligner">
                <div>
                    <p>Vel ipsum neque iste sunt culpa modi recusandae aliquam officiis quod blanditiis obcaecati quis et optio dignissimos dolorum! Voluptatum quibusdam.</p>
                </div>
            </div>
        </section>
        <section>
            <div class="aligner">
                <div>
                    <p>Ut minima aperiam fugit itaque similique blanditiis reprehenderit explicabo error vitae optio aliquam ducimus commodi quo culpa impedit totam nulla!</p>
                </div>
            </div>
        </section>
        <section>
           ...

SCSS

* {
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    overflow-y: scroll;
    width: 100%;
    min-height: 100%;
}
section {
    width: 100%;
    height: 400px;
    background: url('http://placehold.it/400/300') center no-repeat;
    background-size: cover;
    border: 1px solid red;
    position: relative;
    &:nth-child(even) {
        background-attachment: fixed;
    }
    .aligner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
            white-space: nowrap;
            text-align: center;
        &:before {
            content:'';
            display: inline-block;
            height: 100%;
            font-size: 0;
            line-height: 0;
            vertical-align: middle;
        }
        div {
            white-space: normal;
                    text-align: left;
            display: inline-block;
                    vertical-align: middle;
            width: 200px;
        }
        }
}
#video-wrapper {
    position: fixed;
    z-index: -1;
}