Take your carousel game one step further by showcase playable video projects or just use it to add a bit of fluidity to the page.
🎥 Adding a Video Carousel element
From the top menu bar, click on the Add Menu (
Shortcut: M)Search for and select 'Video Carousel'
Click and drag the element onto your canvas
⬆️ Uploading a video to Vev
The video library in Vev serves as the repository for your project. You are required to upload a video file (mp4, wav) or a link to a video file (mp4, ogg, webm). Video elements draw a HTML5 video element and place the required video files as sources on this element.
YouTube, Vimeo or 3rd party sources cannot be used in video carousel.
🔗 From a URL
Double-click the Video Carousel element
Click the pen icon under Video
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 uploaded, hover over the video then select
📁 Upload a video file
Double-click the Video Carousel
Click the pen icon under Video
Select Upload Video
Choose the file from your PC
🏞 Uploading a poster image
Double-click the Video Carousel
Click the pen icon under Poster image
Select Add image or choose an image from one of our free stock images libraries.
👩🏽💼 The video carousel user experience
The Video Carousel user experience changes for desktop and touch-devices.
🖥 Desktop
Hovering over a particular video tile automatically starts the video. The volume mute/unmute buttons toggle the audio. Video is automatically paused when the cursor leaves the tile.
📱 Touch Device
Tapping on a video tile brings up the native video controls to play/pause the video, control volume, enter full screen, and seek through the video. A video that is currently playing will automatically be paused when the user taps or when the user navigates through the carousel.
🎨 Styling a Video Carousel
Text:
Title: Style the tile's title
Volume Icon: Set the volume icon's size and color
Arrow: Set the arrow's color
Margin: Add margin to the tiles' title
Padding: Add padding to the tiles' title
Border: Set a border color, opacity, and line weight for the volume icon and the tiles´ title
Border Radius: Curve the radius of the border for the tiles' title
Effects: Add different types of shadows or blur effects. Learn more about effects
Icons: Change the preset icons of the element with your own shapes or images
䷪Device breakpoints
Users can uniquely specify the number of tiles to display for each device mode including desktop, tablet, and mobile mode. Double click the Video Carousel to open the element's settings modal.
Specify the number of tiles you wish to be visible for each of the listed device modes. Once completed, then switch the Vev Editor device mode between desktop, tablet, or mobile mode to view the designs.
⚙️ Configuration options
Double-clicking the Video Carousel element on your canvas open the configuration options.
Parameter | Option |
Poster Image | An image to display in the carousel tile before the video begins playing. |
Video | The video to play in the carousel tile. |
Title | The visible title in the bottom left corner of the tile. |
Want this link to be clickable? | Turns the video title into a clickable link. |
URL | The target destination where the user will be directed after clicking on the title. Available only if the "Want this link to be clickable?" option is turned ON. |
Number of visible slides per device mode. |
|
Autoplay Carousel | Slides through the carousel automatically. |
Autoplay Interval Speed | The interval for which the carousel pauses before automatically continuing to the next tile. (Only when autoplay is ON) |
Previous/next arrow placement | Preset options for tweaking the placement of the carousel navigation arrows. |