The Video Scroll feature is a dynamic tool that adds a video to your page that plays as a user scrolls. It's a great way to make your website more engaging and visually dynamic. You can use it as a standalone section or embed it within other sections.
Add Video Scroll to your canvas
You can add a Video Scroll component to your canvas and populate it with video content using multiple sources.
Step 1: Add the Video Scroll Component
Press M on your keyboard, or click the Add Menu icon to open it.
Search for and select the Video Scroll component.
Drag and drop the component onto your canvas.
Choose whether to add it as a component or an entire section.
Step 2: Choose Your Video Source
Once the Video Scroll component is on your canvas, you can add videos in three ways:
Uploading a Video File
Double-click the Video Scroll component to open its settings in the right panel.
Click Select Video.
Go to the Upload tab and select a file from your computer.
The video will be unpacked into frames (this may take a few minutes).
Once finished, the video will appear in your Video Scroll component on the canvas.
Using the Royalty-Free Video Library or Video from URL
Double-click the Video Scroll component to open its settings and click Select Video.
Go to the Library tab and click Select Video.
The video library will appear. You can:
Browse or search videos from our royalty-free libraries, including Pexels and Pixabay.
Add a video from a URL: enter a name and paste the video link. Supported formats: .mp4, .ogg, .webm. Click Save. The video will now appear in your library.
To add the video to your Video Scroll component, click it from the library. It will be encoded and appear in the component on the canvas.
Configuring the Video Scroll
Select the Video Scroll component and go to the right-side panel to access its configuration options.
Offset Video Start: Set a percentage value to determine when the video begins to play. For example,
0%means the video starts playing as soon as it becomes visible, while50%means it starts when the component reaches the center of the screen.Offset Video End: Set a percentage value to determine when the video stops playing, based on the viewport percentage.
Loop Count: Choose how many times the video will loop.
Loop Alternate Direction: Toggle this option to make the video play in the opposite direction after each loop.
Limitations
Frame Rate: The Video Scroll component generates a maximum of 12 frames per second, with a total maximum of 300 frames. For very long videos, this can result in a lower frame rate.
Video Length: For the best results and a smooth effect, it is recommended to use videos that are at least 25 seconds long.
Section Width: The Video Scroll section always covers 100% of the screen width and cannot be resized.
File Size: Videos should not exceed 512MB. If your video is larger, you should compress it or increase the playback speed to reduce its file size.
Tips for Optimal Performance
Keep videos short and engaging to maintain user interest.
Always compress large videos to ensure smooth playback without buffering.
Experiment with the offset settings to create the most impactful and seamless scrolling effect.