JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.29/skrollr.min.js"></script>
<div class="skrollr-body">

    <!-- 
      Put the slow image here. It will scroll only 500px for 1000 pixels of
      browser scroll, so 'half speed'. 
    -->
    <div id="splash" data-0="top: 0px" data-1000="top: -500px">
        <video id="vid-1" autoplay loop>
  <source src="http://bigidea.pro/whatgoesup/html/assets/img/video/intro-big.mp4" type="video/mp4">

</video>
        
    </div>
    </div>

   <!-- 
    Put your normal image here, which will scroll with parallax over the above
    image. This will need a margin to push it below your fixed #splash. Set
    its margin-top to the height of #splash. 
   -->
  <div id="overlay">
      <img src="http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast,_Dhaka,_Bangladesh.JPG" height="500"/>
  </div>
  </div>
  
</div><!--/.skroll-body-->

CSS

#splash {
    position: relative!Important;
    height: auto;
}

#overlay {
    position: relative!Important;
    height: auto;
}

JavaScript

$(document).ready(function() {
    skrollr.init()
});