JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <div id="top">
    <h1>Fixed Video Bg Test</h1>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>  
  </div>
</header>
<div id="video">
  <video autoplay loop>
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
  </video>
  <h1>Video Title</h1>
</div>
<div id="video-spacer"></div>
  
<div id="content">
  <div id="static-wrap">
     <section class="moment">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </section>
    <section class="moment">
      <h1>Title Text</h1>
        <div class="moment-clipper">
        <div class="moment-image"></div>
        </div>
    </section>
    <section class="moment">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </section>
    <section class="moment">
      <h1>Title Text</h1>
        <div class="moment-clipper">
        <div...

SCSS

html,body {
  height: 100%;
}
body {
  background: #f6f6f6;
  margin: 0 0 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
}
header {
  width: 100%;
  position: fixed;
  z-index: 10;
  height: 100px;
  top: 0;
  
  #top {
    background: #fff;
    height: 100px;

    h1 {
      margin: 1em 0 0 1em;
      float: left;
    }
    ul {
      margin: 2.5em 2em 0 0;
      padding: 0;
      list-style: none;
      float: right;
      li {
        float: left;
        margin: 0 0 0 1em;
        font-size: 1em;
        a {
          color: #000;
        }
      }
    }
  }
}
#video {
  min-height: 100%;
  background-color: #666;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  
  video {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  h1 {
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    color: #fff;
    width: 50%;
    height: 1em;
    text-align: center;
  }
}
#video-spacer {
  display: block;
  width: 100%;
  height: 100%;
}
#content {
  position: relative;
}
#static-wrap {
  position: static;
}
.moment {
  position: relative;
  width: 90%;
  padding: 5%;
  height: 400px;
  background: #f6f6f6;
 
  h1 {
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    color: #fff;
    width: 50%;
    height: 1em;
    text-align: center;
  }
}

.moment-clipper {
    position: absolute;
    clip: rect(auto,auto,auto,auto);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.moment-image {
  background: #666 url(http://placekitten.com/1000/710) no-repeat 50% 50%;
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
...