About Video Glow Lightbox

Description

About This Component

Video Glow Lightbox is an immersive video lightbox component designed to create cinematic, glowing video experiences directly inside Framer.

The component combines responsive video playback with customizable glow and shadow effects that react beautifully across thumbnails, overlays, and the video player itself. Whether you use subtle lighting or intense neon-like effects, the result feels polished, modern, and visually alive.

It supports uploaded videos, external video URLs, and YouTube videos, while also working seamlessly with CMS variables. Each source can be dynamically connected to CMS content, making it ideal for portfolios, case studies, video showcases, product demos, or content-driven websites.

The component also introduces a flexible Trigger system, allowing any layer or component in your project to open the lightbox on click. This makes it easy to transform custom layouts, cards, buttons, or entire sections into interactive video triggers.

A dedicated pause interaction adds an extra layer of polish: when the video is paused, the glow softly dims and the colors become slightly desaturated, creating a subtle “powered off” visual effect around the player.

Usage Notes

For Phone devices, it is recommended to disable Pause Icon and enable native video Controls. Since Pause Icon relies on hover interactions, using native controls generally provides a more reliable mobile experience.

The glow and lighting effects work especially well on dark-themed websites, where shadows, blur, and neon-like highlights become more immersive and visually impactful.

For best visual results, use optimized thumbnails and properly compressed videos to maintain smooth playback and page performance.

Key Features

Sources & Trigger

Choose between Upload, URL, or YouTube sources
Supports CMS variables for dynamic video sources
Compatible with YouTube videos
Glow Color defines the global glow and shadow color across the component
Trigger mode allows any component or layer to open the lightbox on click

Thumbnail

Upload a custom thumbnail image
Automatically retrieves YouTube thumbnails
Customize thumbnail radius
Hover Scale adds subtle zoom interaction
Adjust glow and glow hover intensity
Adjust shadow and shadow hover intensity

Lightbox

Customize overlay color
Optional overlay blur
Padding controls spacing between the player and screen edges
Fade In controls the opening animation duration
Max Width defines the maximum player width
Adjust glow intensity around the video player
Adjust shadow intensity around the video player

Play Icon

Choose between default SVG icon, custom uploaded icon, or text
Adjust size, color, fill, border, blur, and padding

Close Icon

Choose between default SVG icon, custom uploaded icon, or text
Choose display mode: top-right button or cursor-following overlay close button
Adjust inset from screen edges
Adjust size, color, fill, border, blur, and padding

Pause Icon

Choose between default SVG icon, custom uploaded icon, or text
Adjust size, color, fill, border, blur, and padding
Pause interaction dims the glow and slightly desaturates the player for a subtle powered-off effect

Video Settings

Autoplay on/off
Loop on/off
Muted on/off
Controls show/hide

Trigger Mode

Trigger Mode allows you to open the lightbox from any layer or component inside your Framer project. Instead of relying only on the default thumbnail, you can connect custom cards, buttons, hero sections, images, or entire layouts as interactive video triggers.

This makes it easy to integrate the lightbox naturally into complex designs while keeping complete creative freedom over the UI and user experience.