Skip to main content

Video Scroll

Add a video that plays as the user scrolls

Jørgen Wigum Lurvik avatar
Written by Jørgen Wigum Lurvik
Updated today

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.

Adding Video Scroll in Vev

How to Add Video Scroll in Vev

  1. Add the Component: Add the Video Scroll component to your page from the Add Menu.

  2. Upload a Video: Once the component is on your canvas, you can either:

    • Upload a video directly from your computer.

    • Select a video from Vev's royalty-free video libraries (Pexels, Pixabay) by clicking "Select video."

Uploading a Video

Once the component is on your canvas, you can add a video using a URL or by uploading a file from your computer.

  • From Vev’s built-in royalty-free video libraries (Pexels, Pixabay, Unsplash)

  • From a URL:

    1. Double-click the Video Hover element on the canvas.

    2. Click the pen icon under "Video background".

    3. Choose "From URL".

    4. Name your video, click "+ Add Item", and paste your video link.

    5. Select the video type and click "Save".

  • From Your Computer:

    1. Double-click the Video Hover element.

    2. Click the pen icon.

    3. In the gallery, click "Upload" and choose your video file from your computer.

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, while 50% 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.

Did this answer your question?