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
Click to open fullscreen video
Smooth morph transition
Elegant overlay animation
Escape key close support
Click outside to close
Works inside CMS collections
Supports CMS video fields
Supports CMS poster fields
Great for portfolio systems
Ideal for case studies and blogs
Upload local video files
Use direct video URLs
Works with MP4 and WebM
Easy switching between source types
Start from custom timestamp
Auto play preview
Loop toggle
Mute toggle
Native controls toggle
Adjustable max width
Adjustable max height
Backdrop color control
Z-index control
Scroll locking
Property Controls
Source Type
Video URL
Upload File
Poster toggle
Poster image
Start time
Auto play
Loop
Muted
Background
Border Radius
Object Fit
Backdrop Color
Max Width
Max Height
Z-Index
Lock Scroll
Transition controls
How to Use
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.
Preview the page.
Click the video.
Enjoy a premium expandable lightbox experience.
For any confusion or feature request, contact: daniyalhundred@gmail.comI 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.
Daniyal Habib
