From video carousels to scrollytelling experiences, there are so many different ways to use video to bring content to life. Vev offers native video components that you can use in section backgrounds or page elements to build beautiful, dynamic sites. Using video on websites can significantly enhance user engagement and convey information more effectively than static images or text alone. Use it strategically throughout your site to captivate your audience and achieve your business goals.
Adding videos to your video library
The video library in Vev serves as the repository for your project. Here, you can upload a video file (.mp4, .wav) or link to a video file (.mp4, .ogg, .webm). Video elements work by drawing an HTML5 video element and placing video files as sources on this element.
Upload a video file
From the left panel menu:
Navigate to Assets and click the video icon
Click Upload Video and select your file
Once uploaded, hover over the video and click Select
Click and drag the element to your canvas
Alternatively, from Add menu:
Navigate and click Add component (or shortcut:
M)Search for and select the Video component
Click and drag the component to your canvas
Double-click the component to open the configuration module
Click Select Video, then Upload Video
Link to a video file
From the left panel menu:
Locate the video icon
Click Add URL and give your video a name (required)
Paste your Video URL (required)
for YouTube and Vimeo videos, please use the respective components and not as a URL source.)
Select the video type
.mp4, .ogg, .webm
Hit Save
Once uploaded, hover over the video and click Select
Click and drag your video to your canvas
Note: If you want to integrate your video from a third-party source, please read this article.
Note: Videos with a transparent background can be added with this option.
Configuration options
Want to customize how your video appears and how your audience interacts with it? Double-click the video component to adjust any of the following parameters:
Parameter | Options |
Select Video | Add a video from a file or URL. |
Mute | Toggle on to mute the video. |
Controls | Toggle to show or hide the controls of the default player. |
Autoplay | Toggle to autoplay when the video scrolls into view. |
Loop | Toggle to continuously loop the video. |
Fill | Toggle on, and the video fills the container size. Toggle off, and the video contains the video file's aspect ratio. |
Disable tracking | Toggle on to prevent the video from sending tracking events. |
Preload | Select Auto, Metadata, or None. |
Thumbnail | Add a custom poster image to the video player (recommended for mobile). |
Custom interactions
The Video component has custom interactions for a more immersive experience. Below are the unique triggers and actions for the Video component.
Trigger | Definition |
On play | When the video starts playing, it initiates an action in the target. |
On pause | When the video pauses, it initiates an action in the target. |
On end | When the video ends, it initiates an action in the target. |
On play time | When the video reaches a set time in the video, it initiates an action in the target. |
Action | Definition |
Play | The video starts playing |
Restart | The video restarts |
Toggle play | The video toggles video play (if playing, then stops playing or vice versa) |
Pause | The video pauses |
Mute | The video mutes |
Unmute | The video unmutes |
Toggle sound | The video toggles sound (if muted, the mutes the sound or vice versa) |
Note: If you don't see the custom interactions for the Video component in the Interactions tab, try changing out your current Video component with a new one from the Add menu.
FAQs
Q. How do Videos impact my page performance?
Vev generates a maximum of 12 frames per second of video, up to a maximum number of 300 frames, to help improve page speed and performance. Additionally, it's recommended to use videos with a resolution of 720p, as higher resolutions will be automatically reduced to 720p. For HD-quality videos, you should use a third-party service like Vimeo, YouTube, JWPlayer, or your own self-hosted solution.
Q. What's the maximum supported video size?
The limit for a Vev-hosted video is 1 GB. Make sure your video doesn't exceed this size.
Q. Why is my video still encoding?
Your video may still be encoded due to various factors such as the size of the video, the format, and the server load at the time of encoding. Encoding is a process where the video is converted into a format suitable for streaming and playback on different devices. It may take some time depending on the complexity of the video and the resources available for encoding. Please be patient and allow the encoding process to complete. If the issue persists, consider reaching out to customer support for further assistance.
Q. Why aren't my videos playing (with sound) when the website loads?
Modern browsers, like Safari and Chrome, don't allow videos to play with sound unless the user has interacted with the website first. Just double-click the video and toggle the Mute option. This will fix the issue and allow the video to play automatically when your website loads.
This change in autoplay policies aims to improve user control over media playback, discourage ad blockers, and reduce data usage, particularly on limited networks. For more information, you can refer to Chrome's blog post on their 'Autoplay policy in Chrome'.
Q. What are the supported file types I can upload?
You can upload .mov, .mp4, and .wav files.
Q. Why is my background video not playing on mobile devices?
On iOS devices, when they are in low-power mode, it will not allow videos in Safari to autoplay without the user’s input. This impacts background videos, and Safari displays the play button icon.