title: Scroll video in react
body: <p>I'm building a website in ReactJS. I'm trying to incorporate a video on a webpage that I can scrub through by scrolling. Much like this example here: <a href="https://codepen.io/anon/pen/pKwQop" rel="nofollow noreferrer">https://codepen.io/anon/pen/pKwQop</a></p>
  
  <p>I am wondering how to incorporate this in my code. My first attempt to do so threw me this error here: <a href="https://imgur.com/a/KfRgrmM" rel="nofollow noreferrer">https://imgur.com/a/KfRgrmM</a></p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Navbar from '../components/GlobalNav';
  import Footer from '../components/GlobalFooter';
  import oculus from '../../public/static/video/oculus.mp4';
  
  import './page2.css';
  
  class Test extends Component {
      componentDidMount() {
          var vid = document.getElementById("Oculus");
          var frameNumber = 0;
          var playbackConstant = 500;
          var setHeight = document.getElementById("Test");
  
          vid.addEventListener('loadedmetadata', function() {
              setHeight.style.height = Math.floor(vid.duration) * playbackConstant + "px";
          });
  
          function scrollPlay() {
              var frameNumber = window.pageYOffset/playbackConstant;
              vid.currentTime = frameNumber;
              window.requestAnimationFrame(scrollPlay);
          }
  
          window.requestAnimationFrame(scrollPlay);
      }
  
      render() {
          return (
              &lt;div className="Test"&gt;
                  &lt;Navbar /&gt;
                  &lt;div className="Site-content"&gt;
                      &lt;video
                          tabIndex="0"
                          autobuffer="autobuffer"
                          preload="preload"
                          className="Oculus"
                      &gt;
                          &lt;source type="video/mp4" src={oculus} /&gt;
                      &lt;/video&gt;
                  &lt;/div&gt;
                  &lt;Footer className="Footer" /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Test;
  </code></pre>