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 by first adding a Video component to your canvas, and then selecting the video source.
Step 1: Add the Video Component
Press M on your keyboard, or click the Add Menu icon to open it.
Search for and select the Video component.
Drag the component onto your canvas.
Double-click the video component to open its settings and click Select Video.
Step 2: Choose Your Video Source
Once the video component is on your canvas, you have three options to add video content:
Uploading a Video File
In the left panel, click the Video icon.
Click Upload Video and select a file from your computer.
Hover over the uploaded video and click Select.
The video will appear in your component on the canvas.
Using the Royalty-Free Video Library
In the left panel, click the Video icon.
Browse or search videos from our royalty-free libraries, including Pexels and Pixabay.
To add it to your canvas:
Drag and drop the video onto the canvas, or
Click the Add to design button.
Adding a Video from a URL
In the left panel, click the Video icon.
Click Add URL.
Enter a name for your video and paste the video link.
Supported formats: .mp4, .ogg, .webm.
Click Save.
The video will now appear in your video library.
To add it to your canvas:
Drag and drop the video onto the canvas, or
Click the Add to design button.
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.
Troubleshooting Autoplay Issues
Modern browsers impose restrictions on video autoplay to enhance user experience. Here's how you can optimize autoplay behavior in Vev:
Key Solutions:
Enable Mute Setting: Autoplay works best when videos are muted. Adjust the video's mute settings and ensure that the
mutedattribute is properly configured.Refresh Settings: Toggling the mute setting and publishing the project again can help resolve autoplay issues.
Confirm Autoplay Attribute: Check that the
autoplayproperty is active for the video element.Test in a Private Browsing Context: Use incognito mode to rule out caching issues affecting autoplay.
Frequently Asked Questions (FAQs)
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.
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.