Videos can help make your website more dynamic and engaging. You can use them for backgrounds, storytelling, or interactive content.
Upload a Video File
Go to the left panel and click the video icon
Click Upload Video and choose your file
Hover over the uploaded video and click Select
Drag the video onto your canvas
Add a Video from the Add Menu
Press M or click the Add menu
Search for and select the Video component
Drag it to the canvas
Double-click it to open settings
Click Select Video, then upload your file
Add a Video from a URL
Click the video icon in the left panel
Click Add URL
Enter a name and paste the video link
(Supports: .mp4, .ogg, .webm)
For YouTube or Vimeo, use their specific componentsClick Save
Hover over your video and click Select, then drag it to the canvas
Note: You can use videos with transparent backgrounds using this method. If you want to integrate your video from a third-party source, please read this article.
Configuration options
Select Video – Choose a file or URL
Mute – Turn sound off by default
Controls – Show or hide playback controls
Autoplay – Play video when it comes into view
Loop – Repeat the video continuously
Fill – Make video stretch to fill the container
Disable Tracking – Prevent tracking events
Preload – Choose how much of the video loads upfront (Auto, Metadata, None)
Thumbnail – Add a preview image (especially useful on 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.
You can trigger actions based on how users interact with the video.
Triggers:
On play
On pause
On end
On play time (at a specific time in the video)
Actions:
Play
Pause
Restart
Toggle play
Mute
Unmute
Toggle sound
Note: If the interaction options don’t appear, try deleting and re-adding the Video component 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.