JSFiddle - React, Tailwind, and code Playground

HTML

<video autoplay loop poster="TurbineStill.png"	class="bgvid">
				<source src="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4" type="video/mp4">
			</video>
        <section>
            <div class="textConatiner" id="one" style="top:50%;">
                <h2>Video Backgrounds One</h2>                          
            </div>      
        </section>      
        <section>
            <div class="textConatiner" id="two" style="top:150%;">
                <h2>Video Backgrounds Two</h2>                          
            </div>      
        </section>

CSS

.textConatiner{
        position: absolute;
        background-color: rgba(0, 0, 0, 0.9);
        color: #fff;
        left:10%;
    }
    video.bgvid{
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        background: url(TurbineStill.png) no-repeat;
        background-size: cover;
    }

JavaScript

$(document).ready(function () { 
			$(document).click(function () {
				$('#two').animate({ scrollTop: $('#two').offset().top }, 1000);
				return false;
			});
		});