Fluid Video Lightbox

Show Preview
Fluid Video Lightbox

About Fluid Video Lightbox

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.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.