Using the Video Scroll section

Add a video that plays as the user scrolls

Lewis Bowen avatar
Written by Lewis Bowen
Updated over a week ago

Adding an eye-catching video that plays while the user scrolls can lift your project and create a truly memorable experience. Video scroll is available as an element or an entire section.

Adding Video Scroll in Vev

Adding video scroll

As an element

  1. From the top menu bar, click on the Add Menu (Shortcut: M)

  2. Search for and select Video Scroll

  3. Drag and drop on the canvas

As a section

  1. From the top menu bar, click on the Add Menu (Shortcut: M)

  2. Search for and select Video Scroll

  3. Hold Alt and click Add section here on the top or bottom of the canvas

Uploading a Video to Vev

Unlike other video elements in Vev, you won't be able to select your video from the Video Library. To upload your video;

  1. Click on the Drop video files here tile

  2. Select your video from your computer

  3. Open it

You can also simply drop it over this tile and your video will be uploaded.

One of the major pain points with a feature like this is page speed and performance. To help solve this, there is no time limit on your videos, but we generate a maximum of 12 frames per second of video (1 frame = 1 image), up to a maximum number of 300 frames. Meaning that if you upload a video that is 5 hours long, you get one image per minute until 05:00:00 (since 5 hours = 300 minutes).

Therefore you'll need a video that lasts at least 25 seconds long for optimal results, we are actively working to bring out a new version that will support shorter videos.

Styling a Video Scroll

As a section

  • Spacing top: Add padding to the top of the section in pixels or % to keep spacing between sections

  • Spacing bottom: Add padding to the bottom of the section in pixels or % to keep spacing between sections

  • Width: The width of a section can't be altered, it'll always be set to cover the 100%

  • Height: Set the height of the section in Pixels, % or set it to Auto so that it grows as you add content to it

  • Min H: Sets the minimum amount of height pixels a section can be. A red stippled horizontal line inside your section will reflect the minimum height

  • Clip content: Toggle to hide the content that goes beyond the section's edges

  • Resize to fill vertically: Click to set the section's height to 100%

Configuration Options

Once you've added the Video scroll element or section to your canvas, it's time to upload your video file and adjust the configurations.
โ€‹
To start, select your Scroll Video element and go to the right-side panel.

Parameter

Description

Offset video start

Move the video start position with % of the viewport. If video start is at 0% the video will start to scroll the instant any part of it becomes visible. in the viewport. If you want the video start while it hits the center of the screen, use 50% as the offset video start.

Offset video end

Move the video end position with % of the viewport.

Did this answer your question?