About Video Blur Lightbox
About This Component
Blurred Video Lightbox is a polished Framer component for showcasing videos in a modern, immersive way.
It combines clean thumbnails, flexible trigger options, and a beautiful fullscreen lightbox enhanced with a customizable blur overlay. The blur effect softens the background content when the video opens, creating depth and focus without feeling heavy. Of course, it can be turned off.
The component is fully CMS-compatible, allowing you to connect Framer CMS variables for thumbnails, video URLs, and other dynamic content — making it easy to create scalable video galleries, portfolios, case studies, or content collections.
Everything is controlled through intuitive Framer property controls, with thoughtful defaults that look great instantly.
🔄 Updates:
June 01, 2026 - Improved controls (Play icon and Close icon)
May 13, 2026 - Added support for player padding and max-width controls for improved responsive spacing
May 10, 2026 - Improved the temporary visual effect when using Trigger mode
Apr 30, 2026 - Fixed a scroll lock bug triggered by clicking the overlay
What It Does
Blurred Video Lightbox turns any video into an elegant, interactive entry point that opens in a distraction-free fullscreen modal.
You can use it as:
A classic video thumbnail with play button
A custom trigger attached to any component
A video element inside carousels, grids, or CMS collections
When opened, the background can be dimmed and blurred to create a cinematic, immersive experience.
Key Features
Multi-Source Support
YouTube
Vimeo
Uploaded video files
Flexible Layout System
Thumbnail mode (default)
Custom Trigger mode (attach to any component)
Blur Overlay System
Optional background blur when lightbox is open
Adjustable overlay color and opacity
Smooth entrance and exit transitions
Creates depth and focus on the video
Play & Close Buttons Customization
Default SVG or custom icon
Adjustable size, opacity, fill and blur
Inside or Outside of lightbox
Optional visibility controls
Lightbox Modal
Fullscreen overlay
Responsive 16:9 scaling
Autoplay on open
ESC key & overlay click to close
Scroll lock while open
Close button (inside or viewport position)
Hover & Animation Effects
Optional thumbnail hover zoom
Smooth open / close animations (Scale, Fade, Slide Up)
Performance-friendly transitions
Styling Controls
Border radius
Thumbnail overlay
Responsive layout behavior
Clean scaling and cropping
Trigger Mode
When Trigger mode is enabled, the component no longer renders a thumbnail or play button.
Instead, you can attach the lightbox to any Framer component, such as Buttons, Cards, Images or any Custom component.
This makes Blurred Video Lightbox highly flexible for advanced compositions and non-standard layouts.
How to Set Up
Drag Blurred Video Lightbox onto your canvas
Select your video source
Choose Thumbnail or Trigger mode
Customize blur, overlay, animation, and controls
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!
