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. |
Specify a custom poster image | Add a custom poster image to the video player (recommended for mobile). |
Start play on visible | Toggle to autoplay when the video scrolls into view. |
Loop | Toggle to continuously loop the video. |
Mute | Toggle to mute the video. |
Show video controls | Toggle to hide the controls of the default player. |
Fill player dimensions | Fits the video within the element size and aspect ratio. |
Preload | Select Auto, Metadata, or None. |
Play/pause on hover | Toggle to pause the video when someone hovers over the element. |
No tracking | Toggle to prevent the video from sending tracking events. |
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.