Scrollable Video

Make your videos more than just static clips. Turn them into scrollable, interactive content that grabs attention. With Scrollable Video, you can add any video link and let visitors explore it smoothly as they move down the page.

Requirement 

• Elementor (Page Builder) 
• Animations Addons (Our Plugin)  

Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start.   

How To Activate Scrollable Video 

1. Go to your WordPress Dashboard. 
2. Click on Animation Addons. 
3. Head to the Widgets Tab. 
4. Under Video, toggle on Scrollable Video.  

Step 1: Add the Widget and Configure Video Content

Once you enable the Scrollable Video widget, return to the editor dashboard. Click the ‘+’ (Add Element) icon to open the element panel. In the search bar, type Scrollable Video, then select it once it appears.

After adding the widget, Content and Settings options will be visible. Start from the Content tab.

Content 

Under the Content tab, you will find two settings options to control the following: 

Video Source: If you want to upload your own video from the Media Library, select Upload Video. If you prefer to use a direct link, choose Custom MP4 URL. 

In this example, Custom MP4 is selected. 

 Video link: Add any type of video link that you want to show on your site. Once added, the video will appear on the right side of the screen

Step 2: Control Video Interaction and Scroll Behavior

Use these settings to control how the video behaves during scrolling. This includes pinning, playback controls, and the scroll distance required to play the full video.

Settings

Pin option: This option controls whether the video stays fixed while scrolling. You will find three options: Default, Off, and On. If you do not want the video to remain fixed, select Off. 

However, in this example, On is chosen. 

Video Control: It allows users to manually control the video, such as play and pause, in addition to scroll-based playback.

In this example, the option is enabled by selecting On.

Scroll height: It controls how much scrolling is required to play the entire video. 

For example, if the video duration is 10 seconds and the scroll height is set to 2000px, the user must scroll 2000px to reach the end of the video. 

In this example, 1500px is used, but you can choose any value based on your needs

Final Result 

You Did It 

Your Scrollable Video is now live. As visitors scroll down the page, the video plays smoothly and creates an engaging, interactive experience. You can adjust the scroll height, pin behavior, and playback controls at any time to match your design goals.

That’s it. Your video now responds to user scrolling and keeps attention focused throughout the page.

Additionally, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.