Videos are an excellent way to make your website more dynamic and engaging. This guide explains how to add and configure videos for backgrounds, storytelling, or interactive content.
Adding a Video
You can add videos to your project using three primary methods.
Uploading a Video File:
Go to the left panel and click the video icon.
Click "Upload Video" and choose your file from your computer.
Hover over the uploaded video and click "Select".
Drag the video component onto your canvas.
Using the Add Menu:
Press M or click the Add Menu icon to open it.
Search for and select the Video component.
Drag the component to the canvas.
Double-click the video component to open its settings and click "Select Video" to upload your file.
Adding a Video from a URL:
Click the video icon in the left panel.
Click "Add URL".
Enter a name for the video and paste the video link. Vev supports .mp4, .ogg, and .webm formats for URL-based videos.
Click "Save".
Hover over your video and click "Select", then drag it to the canvas.
Video Configuration Options
Once a video is on your canvas, you can customize its behavior using the configuration options.
Select Video: Choose a new video file or a URL.
Mute: Turns the video sound off by default.
Controls: Shows or hides playback controls (play/pause, volume, etc.).
Autoplay: Automatically plays the video when it comes into the user's view.
Loop: Makes the video repeat continuously.
Fill: Stretches the video to fill its container.
Disable Tracking: Prevents the video from sending tracking events.
Preload: Determines how much of the video loads before a user starts playing it. Options include Auto, Metadata, or None.
Thumbnail: Add a preview image for the video, which is especially useful on mobile devices.
Custom Interactions
The Video component has unique triggers and actions that you can use to create custom interactions.
Triggers:
On play
On pause
On end
On play time (at a specific timestamp in the video)
Actions:
Play
Pause
Restart
Toggle play
Mute
Unmute
Toggle sound
Using Transparent Videos
Transparent videos are ideal for enhancing visual quality and performance. While the Vev encoder does not support transparent video encoding, you can still use them by self-hosting and embedding them via a URL.
How to Use a Transparent Video:
Add Video from URL: In the video panel, click the anchor link icon (🔗) to add a video element from a URL.
Provide Two Sources: To ensure full browser compatibility, you must provide two versions of your transparent video:
A .mov (QuickTime) file with an alpha channel for Safari support.
A .webm video with transparency for all other modern browsers.
You can create transparent videos using tools like Adobe After Effects or FFmpeg, which allow you to export videos with an alpha channel.
Frequently Asked Questions
How do videos impact my page performance?
To improve page speed and performance, Vev's video encoder generates a maximum of 12 frames per second, up to a maximum of 300 frames. Videos with a resolution higher than 720p will be automatically reduced. For HD-quality videos, it is recommended to use a third-party streaming service like Vimeo, YouTube, or your own self-hosted solution.
What is the maximum supported video size?
Vev-hosted videos have a maximum size limit of 500 MB and a maximum length of 1 minute. For larger videos, use a streaming provider like Mux, Vimeo, or YouTube.
Why is my video still encoding?
Video encoding time can vary depending on the video's size, format, and current server load. If the process takes a long time, please be patient. If the issue persists, contact customer support.
Why are my videos not playing with sound when the website loads?
Modern browsers like Safari and Chrome have an autoplay policy that prevents videos from playing with sound until a user has interacted with the website. To fix this, simply toggle the "Mute" option on your video. This will allow the video to autoplay automatically.
What are the supported file types I can upload?
You can upload .mov, .mp4, and .wav files.
Why is my background video not playing on mobile devices?
On iOS devices, background videos may not autoplay without user input when the device is in low-power mode. This will cause Safari to display a play button icon.