JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<header>
			<section class="hero4">
				<div class="container">
                    <div class="video-container2">
				<video preload="true" autoplay="autoplay" loop="loop" volume="0">
					<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
				</video>
				
				
				</div>
					<div class="row nav-wrapper">
						<div class="col-md-6 col-sm-6 col-xs-6 text-left">
							<a href="#"><img src="img/logo.png" alt="logo"></a>
						</div>
						<div class="col-md-6 col-sm-6 col-xs-6 text-right navicon">
							<p>MENU</p><a id="trigger-overlay" class="nav_slide_button nav-toggle" href="#"><span></span></a>
						</div>
					</div>
					<div class="row hero-content">
						<div class="col-md-12">
					
							
							<p id="introduction" class="animated fadeInUp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae sem euismod odio placerat pharetra. Proin quis lacus odio. Nulla interdum, nisi vel pretium vehicula, enim sem faucibus tellus, vel aliquet metus elit eget erat. Aenean quis diam elit. Sed a tempor augue. Vestibulum nec mi sit amet neque lacinia dignissim nec sit amet leo. Vestibulum ultrices suscipit erat vitae gravida. In et dui tincidunt, accumsan urna nec, mollis leo. Ut placerat, ante sit amet aliquet maximus, est lorem lacinia nunc, eu accumsan massa mauris ultricies arcu. Vestibulum et lectus eu turpis tempus porttitor. Vivamus eu volutpat velit. Duis suscipit commodo leo vel dignissim. Duis eu pulvinar risus..
                            
                                
                            
                            </p>
                            
    
						
							
						</div>
					</div>
				</div>
			</section>
                </header>
                			<section class="hero5">
				<div class="container">
					
					<div class="row hero-content">
						<div class="col-md-12">
						<div...

CSS

.hero6{
 background-color: red;   
 color: white;
 position: relative;
    
}

.hero5{
 overflow: hidden; 
 color: white;
 position: relative;
    
    
}


.hero4{
    position: relative;
    padding: 60px 0 60px 0;
    min-height: 100vh;
    background-size: cover;
	background-attachment: fixed;
    background-color: black; 
	height: 1vh;
    color: #fff;
}
.hero4 h1 {
    margin: 200px 0 20px 0;
    font-weight: 300;
    font-size: 50px;
}
.hero4 h1 span {
    display: inline-block;
    color: #a1a9b0;
}
#home {
    width: 100%;
    height: 100%;
}
.hero4{
    width: 100%;
    height: 100%;
}
header i {
    margin-left: 5px
}
#introduction{
	font-size: 16px;
}



.video-container2{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
    right: 0;
	overflow: hidden;
}

.video-container2 video{
    /* zoom to center */
    position: absolute;
    top: -9999px;
    right: -9999px;
    bottom: -9999px;
    left: -9999px;
    margin: auto;
    /* end zoom to center */
    z-index: -1;
    opacity: 0.3;
}

.transparent{
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 1);
    overflow:hidden;
    
}

#imgBox{
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 1);
    
}

JavaScript

$(function(){
    $(window).scroll(function(){
        $(".move").toggle($(this).scrollTop() === 0);
        $("#black").css("opacity",1 -($("#black").offset().top - $("body").scrollTop()) / $("#black").offset().top);
    });
    
    $(document).ready(function() {
        setVideoSize();
    });
    
    $(window).resize(function() {
        setVideoSize();
    });
    
    function setVideoSize() {
        // ratio of video in pixels, width/height
        var videoRatio = 320 / 176;
        
        // ratio of window in pixels, width/height
        var screenRatio = $(window).width() / $(window).height();
        
        if (videoRatio < screenRatio) {
            $('.video-container2 video').width($(window).width());
            $('.video-container2 video').height('auto');
        } else {
            $('.video-container2 video').height($(window).height());
            $('.video-container2 video').width('auto');
        }
    }
});