Skip to content

component

Video Glow Lightbox

By Nostromo Studio

Details

Summary

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

Description

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. Demo preview 1 Demo preview 2 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 Configuring Video Glow Lightbox 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. Component awaiting connection to any content How to Set Up Drag Video Glow Lightbox onto your canvas Choose your video source Customize thumbnail and glow styling Customize lightbox and icons Publish Refund Policy All sales of digital products are final and non-refundable. If you have any questions about the product, please contact me at hellonostromostudio@gmail.com before completing your purchase. I’m happy to help. Enjoy!

Introduction

Glowing Responsive Video Lightbox

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400159018/148/228/309/79/15
  • All · #5243