Using the Video Carousel element

Sliding gallery of tiles, each containing a video and a title

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

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 in Vev

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

  1. Double-click the Video Carousel element

  2. Click the pen icon under Video

  3. Select From URL

  4. Give your video a name

  5. Under Video Source select + Add Item

    • Enter your video URL

    • Select the video type

  6. Hit save

  7. Once the video has uploaded, hover over the video then select

Upload a video file

  1. Double-click the Video Carousel

  2. Click the pen icon under Video

  3. Select Upload Video

  4. Choose the file from your PC

Uploading a poster image

  1. Double-click the Video Carousel

  2. Click the pen icon under Poster image

  3. 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.

Device breakpoints

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.

desktop: the number of tiles visible at a time when viewing on a desktop device.

tablet: the number of tiles visible at a time when viewing on tablet mode.

mobile: the number of tiles visible at a time when viewing on mobile 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.

Did this answer your question?