Vev Help Center
Searchโ€ฆ
Video Scroll
Add and customize a video scroll element
Note: For a more in-depth article on how Video Scroll works check out Video Scroll Sectionโ€‹
In this lesson:
  • Adding a Video Scroll Element
  • Uploading a Video
  • Customizing a Video Scroll Element
  • Setting the Scroll Trajectory

Adding a Video Scroll Section

Note: Currently this feature is only available to beta-testers, please reference the detailed instructions sent separately to gain access and add this feature to your project.

Uploading a Video

Double-click the Video Scroll Element to open the parameter options, then click on the 'pen' icon to open the Video Library and upload your custom video.

Video specifications

One of the major pain points with a feature like this is page speed and performance. To help solve this, videos are limited to 30 seconds in duration and optimized to display at 720p HD. This will keep the video aspect ratio crisp for audiences and result in a great page speed score.
When uploading, any video beyond 30 seconds will result in an error message and will not be available for the Video Scroll Element โ€”ย however, the video will still show in the Video Library.
Hot Tip: 30 seconds not enough? Use Video editing software like Premiere Pro to cut the video and upload multiple sections. Be careful not to go crazy, too many videos can significantly impact performance.

Customizing a Video Scroll Element

Double-click the Video Scroll Element to reveal the Customization Menu with the following parameters.
Parameter
Description
Start video when: It is visible
Start playing the video when itโ€™s visible in the viewport
Start video when: Section starts to be visible
Start playing when the section is in the viewport
Sticky position
Make the video โ€˜stickโ€™ to a position. You can define a fixed distance that itโ€™ll stick to. It's currently possible to have it โ€˜stickโ€™ to a fixed distance to Top or Bottom.
Lock video position: To a fixed onset from the top
Set the distance to top in px parameter to start from the top of the viewport
Lock video position: To a fixed onset from the bottom
Set the distance to top in px parameter to start from the bottom of the viewport
Distance to top in px:
Set the distance the element should begin to be sticky from either the top or bottom of the viewport
Video duration is relative to: Section
Video duration will be set to the height of the section
Video duration is relative to: Fixed value
Set in pixels the entire video duration as it scrolls

Setting the Scroll Trajectory

You asked for it, we listened. You can now set a visible border around the Video Scroll Element to better understand the exact height it will remain sticky for.
To do this, double click the Video Scroll Element and in the right-side Inspector, select border > choose a color and stroke width (for ex. Red and 4px).
This will allow you to better position your elements and to define the height of the entire section.
โ€‹

Troubleshooting

Can I upload an HD or 4k quality video?
You can upload an HD or 4k quality video, however, since we want to translate the best experience on the web the renderer will automatically downsize the video to 720p in order to achieve the best page speed score possible.
My video doesn't look great on mobile, how can I make it better?
Video Scroll is a great desktop experience and most of the time it can translate to tablet and mobile well. But if you are really looking for that great experience you can :
  • Produce a mobile-only video specific to that experience
  • Turn your mobile experience into the regular scrolling page with images. In the Apple Airpods example, you'll notice at large breakpoints and on mobile the experience changes to just static images.

Submitting Feedback

As we are testing this feature in beta, we need all the input we can get!
There are two ways to submit your feedback
In Discord:
  • Message our team your username and we will add you to a private beta group to submit feedback and share knowledge with other beta users
In the Roadmap:
  • Create an account and use the submit feedback button to describe your feedback
Remember, attaching videos and screenshots will help out a ton.
Last modified 3d ago