Video gallery with lightbox and playlist support.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

videos

• Type: string
• Videos (JSON array)

columns

• Type: 2 | 3 | 4 - Default: 3
• Grid columns

autoPlay

• Type: boolean - Default: true
• Auto-play in modal

showTitles

• Type: boolean - Default: true
• Show video titles

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

radius

• Type: number - Default: 8
• Border radius in pixels

density

• Type: 'comfortable' | 'compact' - Default: 'comfortable'
• Layout density

className

• Type: string
• Additional CSS class

onVideoClick

• Type: (video: VideoItem) => void
• Video click handler

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--cc-radius: 8px; /* Border radius */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-video-gallery
• .cc-video-gallery__close
• .cc-video-gallery__duration
• .cc-video-gallery__grid
• .cc-video-gallery__iframe
• .cc-video-gallery__image
• .cc-video-gallery__item
• .cc-video-gallery__modal
• .cc-video-gallery__modal-content
• .cc-video-gallery__modal-title
• .cc-video-gallery__overlay
• .cc-video-gallery__play
• .cc-video-gallery__player
• .cc-video-gallery__thumbnail
• .cc-video-gallery__title
• .cc-video-gallery__video