The Video Carousel component is a sliding gallery of tiles, where each tile features a playable video and a title. It is designed to add fluidity and engaging visual content to your page by showcasing video projects directly within a carousel format.
The Video Carousel User Experience
The user experience for the Video Carousel is distinct depending on whether the user is on a desktop/laptop or a touch-enabled mobile/tablet device.
Desktop Interaction
On desktop devices, video playback is primarily controlled via cursor interaction:
Hover Interaction: Hovering the mouse cursor over a video tile automatically initiates video playback.
Pause Behavior: When the cursor moves away from the video tile, the video automatically pauses.
Volume Control: A visible mute/unmute button within the tile allows users to toggle the audio playback on and off.
Touch Device Interaction (Tablet and Mobile)
On touch-enabled devices, the interaction relies on explicit tapping:
Tap Interaction: Tapping a video tile brings up the device's native video player controls.
Control Options: Users can utilize the standard controls for:
Playing and pausing the video.
Adjusting the playback volume.
Entering full-screen mode.
Seeking to a specific point within the video timeline.
Pause on Interaction: Any video currently playing will automatically pause when the user taps or navigates to a different tile within the carousel.
Configuring the Video Carousel Settings
The configuration of the Video Carousel is accessed by double-clicking the component directly on your canvas. This opens the settings modal, which allows you to customize the content and behavior of the carousel.
Content and Link Parameters
Parameter | Description | Specificity and Example |
Poster Image | The image displayed in the carousel tile before the video begins playing. | This is the thumbnail users see before they interact with the video. |
Video | The source file for the video that plays within the carousel tile. | Must be a valid video file URL or uploaded asset. |
Title | The visible text label displayed in the bottom-left corner of the tile. | Should be concise and descriptive of the video content. |
Want this link to be clickable? | A toggle switch that turns the video title into a hyperlink. | If ON, the URL parameter below becomes mandatory. |
URL | The target destination where the user will be directed after clicking on the title. | Available only when the "Want this link to be clickable?" option is ON. Must be a valid web address (e.g., |
Carousel Behavior and Layout Parameters
Parameter | Description | Notes on Behavior |
Autoplay Carousel | A toggle to enable the automatic sliding of the carousel tiles. | If ON, the carousel will move to the next tile based on the set Autoplay Interval Speed. |
Autoplay Interval Speed | The amount of time the carousel pauses on a tile before automatically sliding to the next one. | Only active when the Autoplay Carousel setting is ON. Specify the time in milliseconds (e.g., 5000ms for 5 seconds). |
Previous/next arrow placement | Preset options for adjusting the physical position of the navigation arrows. | Use these to tweak the visual placement of the arrows on the carousel wrapper. |
Device Breakpoints: Setting Tile Visibility
To ensure optimal viewing on all screen sizes, you must specify the number of visible tiles for different device modes (known as breakpoints).
Accessing Settings: Double-click the Video Carousel to open the settings modal.
Setting Visibility: Explicitly define the desired number of visible tiles for each breakpoint:
desktop: The number of tiles visible simultaneously when viewed on a desktop or laptop device.
tablet: The number of tiles visible simultaneously when viewed in tablet mode.
mobile: The number of tiles visible simultaneously when viewed in mobile/smartphone mode.
Previewing Changes: To accurately preview your design adjustments, switch the device mode (desktop, tablet, or mobile) within the Vev Editor. Note: You may sometimes need to switch between different breakpoints for the newly applied visibility changes to render correctly in the editor preview.
Note: Making use of a regular slider could allow you to set up a 'customized' video carousel with the help of interactions and animations.