Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Pro

Scrollable Video for Elementor Video playback that follows the scroll, frame by frame

Add an Elementor scrollable video to a page and let the scroll play it. Visitors scroll down and the clip plays forward, scroll up and it rewinds, while the video stays pinned in view. Add an MP4, set how far to scroll, and the widget does the rest with GSAP. No code.

Get Animation Addons Pro See the live demos
  • Video on scroll, forward and back
  • Pins while it plays
  • Scroll Height in px
  • GSAP ScrollTrigger built in

Classic widget · Elementor 3 and 4 · ProUpdated

Live demos

Scroll-driven video, live

Two ways to use an Elementor video on scroll, each on a small site. The real clips are not shipped here, so each demo plays a still photo or a drawn scene in place of the video. Scroll inside each frame: it pins and plays the way the widget does on a page.

NorthlightSoundStoriesShop
Northlight Air

Made to move.

Scroll inside the frame to play
A dancer turning, in warm orange tones

Northlight Air

Open earbuds that stay put through every turn. In stores this November.

Pre-order
Product launch film

Product film that plays on scroll

The launch page for a pair of earbuds. A film fills the screen and stays pinned while you scroll: a close-up pulls back to a dancer, then splits into a mirrored pair on warm orange. Scroll back up and it rewinds. A still photo with a zoom stands in for the video.

Scroll inside, then back up

Set Video Source to Custom MP4 URL, Pin Options to On, Video Control off and Scroll Height to 1500 px. The video is 1000 px tall, or 300 px on phones.

Arolax®WorkLabContact
Lab 07 · Summer burst

Fresh in every frame.

Scroll inside the frame to play

Lab 07

A slow motion study for a juice launch: one watermelon, one take, scrubbed by the reader.

See the case
Slow motion story

Slow-motion burst, frame by frame

A case study page for a juice launch. A watermelon wobbles, cracks and bursts as you scroll. Stop and the frame holds; scroll up and the pieces fly back together. The scene is drawn in SVG here, in place of the 8.5 second clip.

Stop halfway to hold a frame

Set Video Source to Custom MP4 URL, Pin Options to On, Video Control off and Scroll Height to 1500 px. The video is 1000 px tall, or 300 px on phones.

Features

Features of Scrollable Video

The features from the original page, checked against the widget and tied to the settings in the Elementor panel.

Upload or link an MP4

Set Video Source to Upload Video for a file from the Media Library, or to Custom MP4 URL and paste the address in Video Link. That is all an Elementor MP4 video on scroll needs.

Scroll controlled video in Elementor

The video plays as visitors scroll down and rewinds as they scroll up. There is no autoplay and no play button to press.

Scroll Height sets the pace

Scroll Height is the scroll distance for the whole video. A 10 second clip with 2000 px plays one second every 200 px. This is how you scrub video on scroll in Elementor.

Pin video on scroll in Elementor

Pin Options On holds the video at the top of the screen from the moment it reaches it until the clip ends. Off lets it scroll with the page.

Elementor scroll video with GSAP

GSAP ScrollTrigger moves the video's time with the scroll, without any script from you. After a second the widget loads the whole file, so seeking stays smooth.

Frames that hold

Stop scrolling and the video holds on that frame, so a detail or a product shot stays on screen as long as the visitor wants.

Optional controls

Turn on Video Control to add the browser's play and pause controls on top of the scroll playback.

Ready for every screen

Pin Options, Video Control and Scroll Height can differ on desktop, tablet and mobile, and the Style tab sets the width and height per device. The video is muted and plays inline, and it fills its box like a cover image.

Step by step

How to play a video on scroll in Elementor

Five steps, no code. The bold names are the labels in the Elementor panel.

  1. Install Animation Addons Pro, then turn on Scrollable Video in Animation Addons → Widgets, under Video.

  2. In Elementor, search the panel for Scrollable Video and drag it into a full-width container.

  3. In Content, set Video Source to Upload Video or Custom MP4 URL, then add your file or its Video Link.

  4. In Settings, set Pin Options to On, leave Video Control off, and set the Scroll Height, for example 1500 px.

  5. In the Style tab, set the video's width and height for each device, then preview the page and scroll.

Get Animation Addons Pro Part of Animation Addons Pro · Works with Elementor Free
FAQ

Questions about Scrollable Video

How do I play a video on scroll in Elementor?

To make Elementor play video on scroll, add the Scrollable Video widget from Animation Addons Pro, add an MP4 in Video Source, set Pin Options to On and choose a Scroll Height. The video plays as visitors scroll down and rewinds as they scroll up.

How to scrub video on scroll in Elementor?

Scroll Height does it. It is the scroll distance that plays the whole clip, so the video moves with the scroll and holds when the visitor stops.

Can I use a YouTube or Vimeo link?

No. Scroll playback needs the video file itself, so the widget takes an uploaded video or a Custom MP4 URL. For a YouTube player, use Elementor's Video widget or the Youtube Video widget.

What does Scroll Height do?

It is the scroll distance, in pixels, that plays the whole video. With 2000 px, a 10 second clip moves one second every 200 px. If you leave it empty, the widget uses 2000 px.

What does Pin Options do?

With On, the video stops at the top of the screen and stays there until its Scroll Height is used up, then the page moves on. With Off, the video scrolls with the page while it plays.

Can visitors pause or play the video?

Yes, if you turn on Video Control. It adds the browser's controls on top of the scroll playback. By default there are none, and the scroll does the playing.

Does the video play with sound?

No. The widget plays the video muted and inline. That is what lets browsers, including phones, move through it freely as people scroll.

Which videos work best?

Short MP4 clips with a small file size, because the widget loads the whole file. A clip exported with frequent keyframes seeks more smoothly when people scroll fast.

Does it work on phones?

Yes. The video is muted and inline, and Pin Options, Video Control and Scroll Height can be set per device. A lower video height on phones, such as 300 px, keeps it in view.

Do I need Elementor Pro?

No. Scrollable Video works with Elementor Free and is part of Animation Addons Pro. It is a classic widget, so it also runs in Elementor 4.

Animation Addons Pro · Elementor 4

Let the scroll play the film

Scroll-controlled video for Elementor, pinned in view and smooth with GSAP.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license