The Video Hover element allows you to add an interactive video to your website. You can change the video the user will see when hovering. The text can also be different. This will create more engagement when visiting your site.
Adding a video hover element
On the left panel go to the Add Menu (
Shortcut: M)Search for and select 'Video Hover'
Click and drag the element onto your canvas
Uploading a video to Vev
From a URL
Double-click the Video Hover element
Click the pen icon under Video background
Select From URL
Give your video a name
Under Video Source select + Add Item
Enter your video URL
Select the video type
Hit save
Once the video has been uploaded, hover over the video then select
From Your Computer
Double-click the Video Hover element
Click the pen icon under Video background
On the video gallery click the upload button.
Choose the file from your PC
Styling a video hover element
Background:
Default Overlay: Set an overlay for the default video
Hovered Overlay: Set an overlay for the video appearing on hover
Text:
Default Overlay: Style the text appearing on the default video
Hovered Overlay: Style the text for the video appearing on hover
Padding: Add padding to the Text, Hovered Text, and Text Body evenly on all sides, or mix them
Border: Set a border color, opacity, and line weight
Border Radius: Curve the radius of the border
Effects: Add different types of shadows or blur effects. Learn more about effects
Configuration options
Double-clicking on the Video Hover element on your canvas opens the configuration options.
Parameter | Options |
Default Text | This text body is visible in the component's default state - when the component is not hovered. |
Hover text | This text body is visible when hovering over the component. |
Video background | This video plays in the background in the component's default state - when the component is not hovered. |
Hover video background | This video plays in the background when hovering over the component. |