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. This guide shows how to add videos to your project, manage your video library, and utilize third-party video providers.
Adding a Video Element
Adding a video works similarly to adding an image, offering two main ways to integrate it into your project: as a flexible element or as a full-width section.
Adding a Video as a Flexible Element
Use this method to place a video component within an existing layout or section.
Select the Component: Choose the Video icon from the top bar navigation.
Place on Canvas: With the video component selected, click-and-drag on the canvas to specify the desired size and placement of the video.
Adding a Video as a Full-Width Section
Use this method to create a dedicated, full-width container for your video.
Select the Component: Choose the Video icon from the top bar navigation.
Place on Section Edge: With the video component selected, move your mouse to the top or bottom edge of any existing section.
Blank Canvas: If the canvas is blank, simply hover near the top edge. A blue highlight will appear, indicating exactly where the new video section will be created.
Setting the Video Source and Playback
Once your video element is on the canvas, you can define its content and playback settings.
Open Properties Panel: Double-click the video component on the canvas, or right-click and choose Edit content.
Video Source Selection: Click the pencil icon below the Video header to open the Video Library.
Within the properties panel, you can:
Control the video source.
Set a custom video thumbnail.
Adjust playback options like autoplay and looping.
Accessing the Video Library
The video library opens within the content-panel on the left-hand side. From here, you can select your video file by:
Uploading: Upload a video from your computer or upload directly from a URL (direct link to the video file).
Project Library: Select from your project’s existing library of uploaded videos.
Royalty-Free Galleries: Search and select videos from the integrated royalty-free video galleries, such as Pexels and Pixabay.
A Quick Note on URL Upload: The "Upload from URL" option is intended for direct links to video files (e.g., .mp4, .webm), not for links to third-party platforms like YouTube or Vimeo. To use platform videos, refer to the section on Using a Third-Party Video Provider.
Quick Placement
You can also add videos by simply dragging them from the Video Library tab directly onto the canvas.
Managing the Video Library
The video library organizes all your project's video files in one central location, simplifying your design process.
Collection: It shows a complete collection of your project's video uploads.
In Use Tag: Videos currently being used in your design are marked with an "In use" tag to help you keep track.
Deleting Videos
To clean up your library:
Individual or Bulk Deletion: Go to the library, check the box on one or more video cards, and click the bin icon (delete) to remove them.
Remove Unused Videos: Use the broom icon (clean-up) to sweep away all videos that are not currently in use in a single click. This action preserves only the videos integrated into your active design.
Naming Videos
Edit Name: To view or change a video's name, hover over its card in the library and click the information tooltip (i). This opens an information panel where you can edit the video’s name.
Search and Identification: Giving your videos clear, descriptive names makes them easier to identify and search for within the video library panel. This name is for your use only inside the editor.
Video Styling and Playback Properties
When you select a video on the canvas, you can access two sets of controls: Styling Properties and Video Properties.
Styling Properties
Styling options appear in the panel on the right. Like any other element, you can adjust standard settings like Border, Border-Radius, and Effects.
Object Fit: For videos, the key styling tool is Object fit. Use this setting to control how the video fits its container with options such as:
Cover: Crops the video to fill the container entirely.
Contain: Shows the entire video, fitting it within the container.
Stretch: Stretches the video to match the container dimensions.
Focus Point: The Object Fit setting also allows you to choose a focus point for cropping.
Video Playback Properties
To control your video's behavior and playback settings, open the properties panel (the same area where you initially selected the video source).
Access Panel: The quickest way to access this is to double-click the video component on the canvas.
Playback Settings: Below the video source selection, you can control essential playback settings:
Set the video to mute.
Show or hide playback controls.
Enable autoplay and loop functions.
Advanced Options: You will also find advanced options for video thumbnails, fallback text, accessibility, and pre-loading settings.
Note on Autoplay: To ensure a better experience for the viewer, most browsers will automatically mute videos when they are set to autoplay.
Using a Third-Party Video Provider
If you want to use a video from a third-party platform like YouTube or Vimeo, you must use their respective dedicated elements instead of the native Vev video component.
YouTube & Vimeo
Locate Elements: Navigate to the Add menu tab along the content panel on the left-hand side. You can find the YouTube or Vimeo element within the Vev Library or use the search bar at the top.
Placement: These components can be used as either a flexible element or a full section.
Configure: Once you add the component to your canvas, double-click it. From here, you can add the URL of the video you wish to use and manage the associated playback settings.
Alternative Providers (Embed Anything)
For any other video provider, you can use the Embed Anything element, provided the provider offers an embed code.
Locate Element: Search for the Embed Anything element within the Add menu tab.
Placement: This element also supports use as a flexible element or a full section.
Configure: After adding the component, double-click it to open the properties panel and paste in the embed code provided by your video host.
Preview Note: When using the Embed Anything component, you will sometimes not be able to see the content until you either preview inside the editor or view the published design.
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.