5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:Te3e,

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.

59:[["$","$L5c",null,{"post":{"id":"019e7d2c-d006-7e9c-944d-216a1a671376","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0377da32-5157-43ad-9c57-e949e915db9e","name":"Daniyal Habib","slug":"daniyalweb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1271714/avatar-8E77IXnX9HLKLrOPuUGBp3gf2I7AYE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"aIYkboOGxCc1HifRPLh4","resolved":true,"title":"Fluid Video Lightbox","body":"$5d","bodyJson":null,"introduction":"CMS-ready expandable video lightbox ","slug":"fluid-video-lightbox","author":{"framerUserId":"0377da32-5157-43ad-9c57-e949e915db9e","name":"Daniyal Habib","slug":"daniyalweb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1271714/avatar-8E77IXnX9HLKLrOPuUGBp3gf2I7AYE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/aIYkboOGxCc1HifRPLh4/fluid-video-lightbox-nEgTY7u6Yvb5UJ0HMgJR30fiFTfX7G"}],"post":null,"createdAt":"2026-05-16T16:39:57.244Z","updatedAt":"2026-05-30T14:06:51.809Z","publishedAt":"2026-05-31T08:35:49.382Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Video-Lightbox-Smooth-kF8e74.js@1KwmCSynQ8tC1wko9mPK","previewUrl":"https://video-lightbox.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"663c4035-214a-4374-a77c-24d7bcc93fff","name":"Embeds","slug":"embeds"}],"lastSaveId":"1KwmCSynQ8tC1wko9mPK"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":51,"liked":false},"comments":{"count":4},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-31T08:35:49.382Z","updatedAt":"2026-05-31T08:35:49.382Z","reported":false}}],"$L5e"]

Suggested for you