component
Fluid Video Lightbox
By Daniyal Habib
Details
- Daniyal HabibAuthor
- componentType
- 2026-05-31Published
- 2026-05-30Updated
- 2026-05-16Added
- PlayersCategories
Summary
Fluid Video Lightbox is a smooth expandable video component for Framer that lets users preview a video inline, then open it in a cinematic fullscreen lightbox with one click.
Description
Fluid Video Lightbox Fluid Video Lightbox is a smooth expandable video component for Framer that lets users preview a video inline, then open it in a cinematic fullscreen lightbox with one click. It creates a polished viewing experience using Framer Motion layout transitions. The video morphs naturally from its original position into an overlay lightbox, preserving context and making interactions feel premium. Built for both regular pages and CMS collections, it’s ideal for showcasing reels, project demos, case study videos, product showcases, testimonials, and storytelling websites. Whether you're using uploaded videos or CMS-linked video URLs, it adapts cleanly across layouts and screen sizes. Features Expandable Lightbox Experience Click to open fullscreen video Smooth morph transition Elegant overlay animation Escape key close support Click outside to close CMS Ready Works inside CMS collections Supports CMS video fields Supports CMS poster fields Great for portfolio systems Ideal for case studies and blogs Flexible Video Source Upload local video files Use direct video URLs Works with MP4 and WebM Easy switching between source types Playback Controls Start from custom timestamp Auto play preview Loop toggle Mute toggle Native controls toggle Lightbox Settings Adjustable max width Adjustable max height Backdrop color control Z-index control Scroll locking Property Controls Source Source Type Video URL Upload File Preview Poster toggle Poster image Start time Auto play Loop Muted Styling Background Border Radius Object Fit Lightbox Backdrop Color Max Width Max Height Z-Index Lock Scroll Motion Transition controls How to Use Setup After copying the component, paste it onto your canvas. Put it either in a regular layer or in a CMS layer. Add the video file via direct link or file upload. Tweak the lightbox settings. That’s it. Final Step Preview the page. Click the video. Enjoy a premium expandable lightbox experience. For any confusion or feature request, contact: daniyalhundred@gmail.com I usually respond within 10 minutes . Best for Portfolio websites CMS case studies Creative agencies Product demos Reel showcases Video testimonials Blog posts Presentation websites Fluid Video Lightbox helps present video content in a much cleaner and more immersive way — without extra setup, custom code, or external integrations.
Introduction
CMS-ready expandable video lightbox
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #583