In this documentation guide, you will learn how to set up, configure, and customize the Video Carousel module. This guide demonstrates how to showcase video showcases, video testimonials, product demos, or YouTube/Vimeo/MP4 playlists in an interactive carousel format complete with custom play buttons and popup lightboxes.

Step-by-step setup guide

1. Open your page in the Visual Builder.
2. Click the green (+) Add Module icon inside a row.
3. Search for DE Video Carousel and insert it.
4. Click Add New Item inside the module to add individual video slides.
5. Choose your video type (YouTube, Vimeo, or Self-Hosted MP4) and enter the video URL or upload the video file.
6. Upload a custom cover image and customize the play button overlay.
7. Configure carousel autoplay, transition speed, arrows, and pagination under the Content Tab.
8. Customize typography, hover animations, and arrow colors under the Design Tab.
9. Save and publish your page.

Detailed settings

A. Content Tab

1. Video Item Settings (Child Items)

• Video Type: Choose video source:
  • YouTube: Paste any YouTube video or Shorts link.
  • Vimeo: Paste any Vimeo video URL.
  • Self-Hosted Video (MP4): Upload MP4 video files directly from your WordPress Media Library.
• Video URL / Video Upload: Field for URL insertion or media picker.
• Video Title & Caption: Optional fields for slide title, subtitle, or video description text.
• Custom Cover Image / Thumbnail: Upload a custom high-resolution image overlay to replace default video thumbnails.
• On Click Trigger:
  • Inline Player: Plays video directly within the slider card container.
  • Lightbox Popup: Opens video in a full-screen modal lightbox popup when clicked.

2. Carousel Control Settings

• Slides to Show: Set number of video slides visible simultaneously (Desktop, Tablet, Mobile).
• Slides to Scroll: Number of slides moved per scroll gesture.
• Autoplay: Turn ON for automatic slide progression.
• Autoplay Speed (ms): Set delay between slide shifts (e.g., 4000 = 4 seconds).
• Pause on Hover: Pause autoplay when user hovers mouse over video cards.
• Infinite Loop: Continuous slide looping without stopping at the end.
• Transition Effect: Choose carousel animation (Slide, Fade, Coverflow, Flip).
• Show Navigation Arrows: Display left/right carousel arrows.
• Show Pagination Dots: Display bottom slide progress dots.

B. Design Tab

• Play Button Styling:
  • Play Icon Color & Background: Customize play button fill color, circle background color, and size.
  • Hover Pulse Effect: Toggle pulsating ripple animation on the play button.
  • Icon Size and Radius: Control icon scale and corner curves.
• Thumbnail and Overlay Styling:
  • Overlay Color and Opacity: Apply custom dark or colored gradient overlay over thumbnails.
  • Hover Zoom Animation: Zoom in cover image slightly on hover.
• Title and Text Typography: Customize font family, weight, text color, alignment, font size, and line height for video titles and captions.
• Arrow and Pagination Styling: Customize navigation icon colors, arrow background shapes, active dot highlights, and hover transitions.
• Card Border and Shadow: Apply rounded corners and drop shadows to video carousel cards.