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.
🎥 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.
Vev videos are compressed to 720p. For HD quality videos, you need to use a third-party service such as Vimeo, YouTube, JWPlayer, or your own self-hosted solution.
Note: YouTube, Vimeo, and other third-party sources cannot be used in the Vev video library. Learn how to add videos to your project from third-party sources.
📁 Upload a video file
From the top menu (Shortcut):
Navigate to the left 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
From the Add Menu:
From the top menu, click Add Menu (
Shortcut: M)Search for and select the Video element
Click and drag the element to your canvas
Double click the element to open the configuration module
Click Select Video, then Upload Video
🔗 Link to a video file
From the top menu (Shortcut):
Navigate to the left and click the video icon
Select From URL and give your video a name
Under Video Source select + Add Item
Enter your video URL
Select the video type
Hit save
Once uploaded, hover over the video and click Select
Click and drag the element to your canvas
⚙️ Video parameters and dimensions
Want to customize how your video appears and how your audience interacts with it?Double-click the video element 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 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. |
Disable right-click/context menu | Disable the ability to right-click on the video on web browsers. |
No tracking | Toggle to prevent the video from sending tracking events. |
Dimensions
Use the style panel to the right of your canvas to edit the dimension size of a video.
Click the video element to open the style panel
Adjust the video's width and height
Note: You can right-click the chain link icon to select one of our preset aspect ratios, or use an aspect ratio calculator to find the right pixel dimensions for your video.
🖥 Add a video from a third-party source
YouTube
Open the Add Menu in the top menu (
Shortcut: M)Search for and select YouTube
Click and drag the element to your canvas
Double-click the element to open configurations
Add the YouTube video's URL
Configuration options
Double-click the video element to adjust any of the following parameters.
Parameter | Options |
URL | Enter the URL of the YouTube video. |
Loop | Toggle to continuously play the video. |
Autoplay | Toggle to autoplay when the video scrolls into view. |
Hide controls | Toggle to hide the YouTube player controls. |
Hide fullscreen | Toggle to hide the fullscreen option. |
Vimeo
Open the Add Menu from the top menu (
Shortcut: M)Search for and select Vimeo
Click and drag the element to your canvas
Double-click the element to open configurations
Add the Vimeo video's URL
Configuration Options
Double-click the video element to adjust any of the following parameters.
Parameter | Options |
Video | Add video URL from Vimeo. |
Color | Color of the title, description, and volume control. |
Lazy load | Allows the video to be loaded at the moment of need. |
Autopause | Pauses video if another video starts playing. |
Mute audio | Turn off audio. |
Loop | The video will automatically start over again once finished. |
JW Player
Open the Add Menu from the top menu (
Shortcut: M)Search for and select JW Player
Click and drag the element onto your canvas
Double-click the element to open configurations
Add the JW video's URL
Configuration Options
Double-click the video element to adjust any of the following parameters.
Parameter | Options |
Enter embed URL | Add video URL from JW. |
Mute | Turn off audio. |
Autoplay | Allows the video to start playing automatically. |
Autopause | Pauses video if another video starts playing. |
Loop | The video will automatically start over again once finished. |
Show controls | Show the controls of the default player. |
Display title | Display video's title. |
Display description | Display video's description. |
Video tracking name | Add the tracking URL of the video. |
Tip: Don't see a video source you need? Add or upvote it as a feature request on our product roadmap.
FAQs
Q. Why aren't my videos playing 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.
Q. What are the supported file types I can upload?
You can upload .MOV, .MP4, and .WAV
Q. What's the maximum supported video size?
Limits for a Vev hosted video are 1GB. Make sure your video doesn't exceed this size.