Play/Pause Video on Scroll

Automatically plays and pauses HTML videos based on their scroll visibility using GSAP ScrollTrigger. A lightweight performance optimisation that ensures videos only play when in view.

gsapscrollvideoperformanceintersection

Setup — External Scripts

Setup: External Scripts

html

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

Code

index.html

html

<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>

styles.css

css

.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;
}

script.js

javascript

// 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();
});

Attributes

Name	Type	Default	Description
data-video="playpause"	string		Add to any parent element of a <video>. The script finds the descendant video and plays or pauses it based on scroll visibility. Does not need to be on the direct parent.

Notes

•The video element should have the muted and playsinline attributes set for reliable autoplay across browsers.
•GSAP and ScrollTrigger must be loaded before the script runs.
•Multiple videos on the same page are supported — each element with [data-video="playpause"] gets its own ScrollTrigger.
•You can replace ScrollTrigger with your own IntersectionObserver setup if you prefer not to use GSAP.

Guide

Attribute

Add [data-video="playpause"] to any parent element of a HTML <video>. The script searches for a descendant video and automatically plays or pauses it based on visibility. The attribute does not need to be on the direct parent of the video.

ScrollTrigger

The script uses GSAP ScrollTrigger to detect when the element enters or leaves the viewport. The default start is "0% 100%" (element bottom enters viewport bottom) and end is "100% 0%" (element top leaves viewport top). You can adjust these values or replace ScrollTrigger with your own IntersectionObserver implementation.

Performance

Pausing videos when they are off-screen prevents unnecessary CPU and GPU usage, which is especially important on pages with multiple videos.

Back to Video & Audio