scroll-scrub-video

A browser-first Web Component for sticky scroll-driven video scrubbing.

Install

npm install scroll-scrub-video

Usage

Import the package once, then use the custom element anywhere in your page.

<script type="module">
  import "scroll-scrub-video";
</script>

<scroll-scrub-video
  src="https://cdn.example.com/video.mp4"
  aria-label="Product demo"
></scroll-scrub-video>

You can also import the named helper if you want to register the element manually.

import {
  defineScrollScrubVideo,
  ScrollScrubVideoElement,
  TAG_NAME,
} from "scroll-scrub-video";

defineScrollScrubVideo();

API

Attributes

• src (required): video URL
• aria-label (optional): accessible label for the scrub viewport

Events

• scroll-scrub-ready
  • detail: { duration, width, height }
• scroll-scrub-error
  • detail: { message, src }

Notes

• The component uses fetch() plus a blob URL by default for more reliable scrubbing.
• Remote video URLs must allow browser access, and canvas-safe playback generally requires CORS support.
• This package is intended for browser environments.

Development

npm run build
npm run check
npm run pack:dry