JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<nav id="headnav" class="menu"> <a id="logo" href="index.php"><img src="http://icons.iconarchive.com/icons/benjigarner/softdimension/256/Image-ready-CS-2-icon.png"></a>
        <ul>
        
          <li><a data-scroll id="t_link" href="#feature">Feature</a></li>
          <li><a data-scroll id="d_link" href="#thedrink">The Drink</a></li>
          <li><a data-scroll id="o_link" href="#recipes">Recipes</a></li>   
                     
        </ul>

    </nav>





<div id="home" data-stellar-background-ratio="0.5">
                <div id="poloclub_open">
                      <div class="space"></div>
                      <img src="http://cdn1.yourstory.com/wp-content/uploads/2014/04/Image-1.jpg" />
                      <div class="space"></div>
                </div>
                          <div id="paratext1">
                          <blockquote class="ani"><a href="#trailer">PRESENTING POLO CLUB</a></blockquote>
                          </div><!--paratext1--> 
                </div>
        <!--thedrink-->
                          
                        
                          
 <section id="feature">
                          
                          
                                <div id="trail">
                                      <div id="videocontrol">
                                      <a id="play-pause" class="play"><img src="http://www.veryicon.com/icon/png/System/clearDisk%20iconset%20part%20I/audio%20pause.png"/></a>
                                      </div>
                                    <video id="video_background" preload="auto" volume="5">
                                              <source src="http://video-js.zencoder.com/oceans-clip.mp4"/>
                                              <source src="http://video-js.zencoder.com/oceans-clip.webm"/>
             ...

CSS

nav#headnav {
	width:100%;
	min-width:800px;
	background-color:rgba(255, 255, 255, 1);
	padding:0 12px;
	height:90px;
	position:fixed;
	z-index:1000;
	font-family:'Oswald';
	font-size:2em;
	color:#aaaeb0;
	padding-left:0;
}
nav a#logo {
	float:left;
	display:block;
	width: 30%;
	min-width:453px;
}
nav a#logo img {
	vertical-align:middle;
	float:right;
	float: left;
	height: 90px;
}
nav a#theimages {
	width:3%;
	margin:1%;
}
nav a#theimages img {
	width:100%;
}
nav a#thevideos {
	width:3%;
	margin:1%;
}
nav a#thevideos img {
	width:100%;
}
nav.stick {
	position: fixed;
	top: 0;
	z-index: 10000;
}
nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
	margin:1% auto;
	width:40%;
	float:left;
	display:block;
}
nav li {
	display:inline-block;
	float: left;
	margin:0 auto;
	text-align:center;
	width:32%;
	padding-top:1%;
	height:54px;
}
nav li a {
	color:#aaaeb0;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	padding-left:2%;
	padding-right:2%;
}
#home {background-color:#000;
		background:url('../images/polo_img1.jpg');
		background-attachment:fixed;
		background-size:cover;
		background-position:100% 40%;
		width:100%;
		position:relative;}



#paratext1{position: relative;
			padding-bottom:6%;
			padding-top:6%;
			text-align:center;}	
			
			
#paratext1 blockquote{font-family:'Oswald';
					  font-size:500%;
					  color:#F5F5F5;
					 visibility: hidden; 
			  text-shadow: 3px 2px 2px #383838;					  
					  letter-spacing:0;}
			

#poloclub_open img{width:100%;}			

#polo_drink img{position:absolute; bottom:0; width:26%; margin:0 37%;}
#back_drink{background:#fff; width:100%; height:400px; display:block;}		 

section{position:relative;}

#feature{
		width:100%;
		background:#000;}		


 
#trail{position:relative;
	 padding-top:2%;
	 padding-bottom:2%;}




#video_background{width:100%; 
				  margin:10px 0;
				  margin-bottom:0;}
				  

#videocontrol{position:absolute;
			  z-index:1001;
			  width:100%;
			 ...

JavaScript

//addds an image at the end of the video so that it is not a black space
      var video = document.getElementById('video_background');
      var wrapper = document.getElementById('wrapper');
      var image = document.getElementById('image_background');
      video.addEventListener('ended', function() {
          video.style.display = 'none';
          image.style.display = 'inline';
      }, false);







//play & pause buttons
      window.onload = function() {
      
      var video = document.getElementById("video_background");
      
      var playButton = document.getElementById("play-pause");
      
      playButton.addEventListener("click", function() {
          if (video.paused == true) {
              video.play();
      
              playButton.innerHTML = "<img src='http://www.veryicon.com/icon/png/System/clearDisk%20iconset%20part%20I/audio%20pause.png'/>";
          } else {
              video.pause();
              playButton.innerHTML = "<img src='http://b.dryicons.com/images/icon_sets/coquette_part_6_icons_set/png/128x128/play.png'/>";
          }
      });
      
      }
      

      
      
      
      
      
      
//play when video is visible
      
      
      
      
      var videos = document.getElementsByTagName("video"), fraction = 0.8;
      
      function checkScroll() {
      
      for(var i = 0; i < videos.length; i++) {
      
          var video = videos[i];
      
          var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
              b = y + h, //bottom
              visibleX, visibleY, visible;
      
              visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
              visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));
      
              visible = visibleX * visibleY / (w * h);
      
              if (visible > fraction) {
          ...