Integrating an eye-catching video that plays as the user scrolls can elevate your project and create a truly memorable experience. The Video Scroll component is designed to captivate visitors by providing dynamic, engaging content that enhances the storytelling of your webpage. This feature is available both as a component that can be embedded within any section and as a full-width section itself, offering flexibility in how you incorporate videos into your design.
Uploading a Video to Vev
When adding a video to your project in Vev, you have two options: you can either upload the video directly from your device or select a video from the Video Library by clicking "Select video".
Configuration Options
Once you've added the Video scroll component or section to your canvas, it's time to upload your video file and adjust the configurations.
To start, select your Video Scroll component 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. |
Loop count | Loop the video for a set number of times. |
Loop alternate direction | Alternates the direction of playback after each loop cycle. |
Limitations
The frame generation cap of 12 frames per second, up to a maximum of 300 frames. This means that for longer videos, such as those that are 5 hours long, you will only get one image per minute. To achieve optimal results with the Video Scroll, your video should be at least 25 seconds long.
Additionally, the width of a section in the Video Scroll cannot be altered and is always set to cover 100% of the screen width.
To ensure proper functionality and performance, videos should not exceed 512MB. If your video is larger than this limit, consider compressing it or increasing its playback speed to reduce the file size while maintaining the desired effect. This will help ensure smooth playback and a better user experience on your webpage.