---
title: "Scroll Scrub Video — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Nabeel · Players. About Play a video on scrub."
canonical: "https://framer.elliotli.dev/component/scrollvideo"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/Scroll Scrub Video

# Scroll Scrub Video

[View on Framer](https://framer.com/marketplace/components/scrollvideo/?via=elliot-li)

![Scroll Scrub Video preview image 1](https://framer.elliotli.dev/og/component/scrollvideo/49d9bbb69122d22b/1600x1200.jpg)

## Summary

About Play a video on scrub.

## Description

## About

Play a video on scrub. The video starts playing when it comes into your viewport and stops playing based on a value you set as a properety. This allows you to set the pace and how long you want to play the video. You can upload the video or set a video URL. For optimal results, its recommended that you upload the video to a third party service and use the link

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click [here](https://segmentui.com/uikit) to see the full library

## Instructions

1.  **Add Component**: Copy and paste the Scroll Video component code into your Framer project file
    
2.  **Position Component**: Place the component on your canvas and **set it to sticky positioning** for the scrolling effect to work properly - this is essential for the video to stay in view while scrolling. Also set the width and height to fill and 100vh
    
3.  **Configure Video Source**: Choose between URL or File upload, then add your video URL or upload an MP4/MOV/WebM file
    
4.  **Customize Scroll Behavior**: Set Scroll Length to determine how much scrolling controls the video duration, choose Video Alignment for viewport positioning, select Video Fit for aspect ratio behavior, and configure Start On to control when the scroll interaction begins (top/center/bottom of viewport)
    

## How It Works

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-73bwiz4k-oZPL4ZsEHcmtZ7QwVWADwSTPnbfJ16)

You can customize this scroll-controlled video component through six simple settings. Choose between uploading a video file or using a web URL, then set how much scrolling distance it takes for the video to play from start to finish (from quick 100-pixel scrolls to long 20,000-pixel journeys). Position the video at the top, center, or bottom of the screen, and decide when it starts playing - either immediately when it appears, when it's halfway visible, or only when fully on screen.

## Support

For any queries and help setting up the component, contact [hello@segmentui.com](mailto:hello@segmentui.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #4610

## Details

- **Author**: Nabeel
- **Price**: $15.00
- **Published**: 2025-07-29
- **Updated**: 2025-08-07
- **Added**: 2025-07-28
- **Categories**: Players

## More like this

-   [Cozy Video Card](/component/cozy-video-card) — 日香理 / hikari · $1 — A cozy card for your YouTube video
-   [A/B Audio Player Pro](/component/a-b-audio-player-pro) — Injamul Haque Somrat · $24 — Master Audio Comparison Player
-   [Reelflow](/component/reelflow) — Quaders · Free — An auto video ticker for reels
-   [Mux Video](/component/mux-video) — NorthGarden · $3 — Drop Mux video into any Framer site with full control over playback, UI, and interaction.