Play/Pause Video on Scroll

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>

<div class="demo-video">
  <div class="demo-video__before"></div>
  <div data-video="playpause" class="cover-video">
    <video class="cover-video__video" src="https://osmo.b-cdn.net/resource-media/play-pause-resource-RostislavUzunov.mp4" muted="" loop="" webkit-playsinline="webkit-playsinline" playsinline="playsinline"></video>
  </div>
</div>

.demo-video {
  border-radius: 1em;
  width: 34em;
  max-width: calc(100% - 4em);
  position: relative;
  overflow: hidden;
}

.demo-video__before {
  padding-top: 75%;
}

.cover-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.cover-video__video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

// Register GSAP Plugins
gsap.registerPlugin(ScrollTrigger);

// Resource
function initPlayPauseVideoScroll() {
  const videos = gsap.utils.toArray('[data-video="playpause"]');
  
  videos.forEach(el => {
    const video = el.querySelector('video');
    if (!video) return;
    
    ScrollTrigger.create({
      trigger: el,
      start: '0% 100%',
      end: '100% 0%',
      onEnter: () => video.play(),
      onEnterBack: () => video.play(),
      onLeave: () => video.pause(),
      onLeaveBack: () => video.pause(),
    });
  });
}

// Initialize Play/Pause Video on Scroll
document.addEventListener('DOMContentLoaded', function() {
  initPlayPauseVideoScroll();
});