https://framer.com/m/Scrollvideoplayer-Y8uRHO.js
Io / Enhancements / ScrollVideoPlayer
ScrollVideoPlayer
ScrollVideoPlayer drives a video’s playhead from the scroll position instead of from time, so the footage advances exactly as far as the reader travels.
Examples
Live specimens for every control the component exposes.
Default
Point it at a video and the frame shown is a function of how far the block has crossed the viewport. Nothing plays on its own.
Mode and speed
Element mode maps the scroll across the block itself. Sticky Track pins the video and scrubs it over a longer run. playbackSpeed multiplies how much footage each pixel of scroll buys.
element mode
sticky track
playback speed 2x
Viewport trigger
The trigger decides which edge of the viewport starts the scrub. Full Pass spends the whole crossing on the clip.
bottom
center
top
full pass
Fit and frame
objectFit decides how the footage fills the box, backgroundColor shows wherever it does not, and borderRadius clips the corners.
fit cover
fit contain
radius 24
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for ScrollVideoPlayer
A product or process video should advance under the reader’s own control.
The footage needs to stay locked to scroll position, frame for frame.
A hero should hold still and scrub while the page moves past it.
The clip must never autoplay or run ahead of the reader.
Reach for something else
The video should just play — use the Video component.
Only the frame’s shape should change on scroll — use RadiusOnScroll.
The reader needs play, pause and a scrubber — this exposes no controls.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.