title: How to make a video play as I scroll down in a div with overflow scroll
body: <p>Right now I am trying to make a scroll snapping section that displays information over a video. As the user scrolls down, I need the video to play and html that pertains to it will popup. I have created a full page layout that works in every way but the video playing on scroll down and up. </p>
  
  <p>Right now I am attempting to use pageYOffset but I believe because the div "container" is set to scroll it is not using pageYOffset as intended. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    height: 100vh;
    line-height: 1.6;
    overflow: hidden;
  }
  
  #v0 {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 100%;
      z-index: -1;
  }
  
  .container {
    width: 100%;
    height: 100%;
    z-index: 1;
    /* CSS Smooth Scroll */
    overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
  }
  
  .lead {
    font-size: 1.5rem;
  }
  
  .navbar {
    position: fixed;
    top: 0;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 60px;
    background: rgba(0,0,0,0.7);
  }
  
  .navbar ul {
    display: flex;
    list-style: none;
    width: 100%;
    justify-content: center;
  }
  
  .navbar ul li {
    margin: 0 1rem;
    padding: 1rem;
  }
  
  .navbar ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #f4f4f4;
  }
  
  .navbar ul li a:hover {
    color: skyblue;
  }
  
  section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100vh;
  
    /* Scroll Snap */
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  
  section h1 {
    font-size: 4rem;
  }
  
  /* Section Images */
  /* section#link1 {
    background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;;
  }
  
  section#link2 {
    background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;;
  }
  
  section#link3 {
    background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;;
  } */
  
  .entered {
   -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
           animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  }
  
   @-webkit-keyframes text-focus-in {
      0% {
        -webkit-filter: blur(12px);
                filter: blur(12px);
        opacity: 0;
      }
      100% {
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 1;
      }
    }
    @keyframes text-focus-in {
      0% {
        -webkit-filter: blur(12px);
                filter: blur(12px);
        opacity: 0;
      }
      100% {
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 1;
      }
    }
  
  
  #footer {
    height: 200px !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
    &lt;div class="container"&gt;
      &lt;nav class="navbar"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#link1"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#link2"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#link3"&gt;Service&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;section id="link1"&gt;
        &lt;h1&gt;Welcome To My Site&lt;/h1&gt;
        &lt;p class="lead"&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quis!&lt;/p&gt;
      &lt;/section&gt;
      &lt;section id="link2"&gt;
          &lt;h1&gt;About&lt;/h1&gt;
          &lt;p class="lead"&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quis!&lt;/p&gt;
      &lt;/section&gt;
      &lt;section id="link3"&gt;
          &lt;h1&gt;Service&lt;/h1&gt;
          &lt;p class="lead"&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quis!&lt;/p&gt;
      &lt;/section&gt;
      &lt;section id="footer"&gt;
          &lt;h1&gt;footer&lt;/h1&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  
    &lt;video id="v0" tabindex="0", autobuffer preload&gt;
        &lt;source type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' src="http://implantlogic.wpengine.com/wp-content/uploads/2020/06/fingers.mp4"&gt;&lt;/source&gt;
    &lt;/video&gt;
  
  &lt;script type="text/javascript"&gt;
    "use strict";!function(e){"function"==typeof define&amp;&amp;define.amd?define(e):"undefined"!=typeof module&amp;&amp;module.exports?module.exports=e():window.enterView=e.call(this)}(function(){var e=function(e){function n(){g=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(e){return setTimeout(e,1e3/60)}}function t(){if(h&amp;&amp;"number"==typeof h){var e=Math.min(Math.max(0,h),1);return q-e*q}return q}function i(){var e=document.documentElement.clientHeight,n=window.innerHeight||0;q=Math.max(e,n)}function o(){y=!1;var e=t();A=A.filter(function(n){var t=n.getBoundingClientRect(),i=t.top,o=i&lt;e;if(o&amp;&amp;!n.__enter_view){if(m(n),_)return!1}else!o&amp;&amp;n.__enter_view&amp;&amp;w&amp;&amp;w(n);return n.__enter_view=o,!0}),A.length||window.removeEventListener("scroll",r,!0)}function r(){y||(y=!0,g(o))}function u(){i(),o()}function f(e){for(var n=e.length,t=[],i=0;i&lt;n;i+=1)t.push(e[i]);return t}function c(e){var n=arguments.length&gt;1&amp;&amp;void 0!==arguments[1]?arguments[1]:document;return"string"==typeof e?f(n.querySelectorAll(e)):e instanceof NodeList?f(e):e instanceof Array?e:void 0}function d(){A=c(l)}function a(){window.addEventListener("resize",u,!0),window.addEventListener("scroll",r,!0),u()}function s(){var e=l&amp;&amp;m;e||console.error("must set selector and enter options"),n(),d(),a(),o()}var l=e.selector,m=e.enter,w=e.exit,v=e.offset,h=void 0===v?0:v,p=e.once,_=void 0!==p&amp;&amp;p,g=null,y=!1,A=[],q=0;s()};return e});
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  enterView({
          selector: 'section',
          enter: function(el) {
              el.classList.add('entered');
          },
          exit: function(el) {
              el.classList.remove('entered');
          },
      })
  
      var frameNumber = 0, // start video at frame 0
      // lower numbers = faster playback
      playbackConst = 1000,
      // select video element
      vid = document.getElementById('v0');
      // var vid = $('#v0')[0]; // jquery option
  
  
  // Use requestAnimationFrame for smooth playback
  function scrollPlay(){
  var frameNumber  = window.pageYOffset/playbackConst;
  vid.currentTime  = frameNumber;
  window.requestAnimationFrame(scrollPlay);
  }
  
  window.requestAnimationFrame(scrollPlay);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>