---
title: "Video Blur Lightbox — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Nostromo Studio · Players. Video Blur Lightbox What It Does Blurred Video Lightbox turns any video into an elegant, interactive entry point…"
canonical: "https://framer.elliotli.dev/component/blurredvideolightbox"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/Video Blur Lightbox

# Video Blur Lightbox

Immersive Video Lightbox & CMS support

[View on Framer](https://framer.com/marketplace/components/blurredvideolightbox/?via=elliot-li)

![Video Blur Lightbox preview image 1](https://framer.elliotli.dev/og/component/blurredvideolightbox/e3ce3882bad5f7ae/1600x1200.jpg)

## Summary

Video Blur Lightbox What It Does Blurred Video Lightbox turns any video into an elegant, interactive entry point that opens in a distraction-free fullscreen modal.

## Description

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

[Demo 1](https://videolightbox-component.framer.website/) — [Demo 2](https://videolightbox-component.framer.website/preview)

🔄 **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
    

![Video Blur Lightbox](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-cgzb5ber-I8GCDYIkz2dwjDG9ms4iJZVUD5rOje)Video Blur Lightbox

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

![Configuring Video Blur Lightbox](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-cgzb5ber-YAbFjoz3QaoGbZUphc9yrr7R6oaFHa)Configuring Video Blur Lightbox

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

![Component awaiting connection to any content](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-phglalpx-zIGsqIm8Orch4Ny4kv1SgJPL4aHgOT)Component awaiting connection to any content

## How to Set Up

1.  Drag Blurred Video Lightbox onto your canvas
    
2.  Select your video source
    
3.  Choose Thumbnail or Trigger mode
    
4.  Customize blur, overlay, animation, and controls
    
5.  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](mailto:hellonostromostudio@gmail.com) before completing your purchase. I’m happy to help.

Enjoy!

## Rank history [How rankings work →](/terms#rankings)

-   All · #9846

## Details

- **Author**: Nostromo Studio
- **Price**: $12.00
- **Published**: 2026-03-02
- **Updated**: 2026-06-08
- **Added**: 2026-02-23
- **Categories**: Players

## More like this

-   [Cozy Video Card](/component/cozy-video-card) — 日香理 / hikari · $1 — A cozy card for your YouTube video
-   [A/B Audio Player Pro](/component/a-b-audio-player-pro) — Injamul Haque Somrat · $24 — Master Audio Comparison Player
-   [Reelflow](/component/reelflow) — Quaders · Free — An auto video ticker for reels
-   [Mux Video](/component/mux-video) — NorthGarden · $3 — Drop Mux video into any Framer site with full control over playback, UI, and interaction.