---
title: "AmbiLight Video — Free Framer component · Best of Framer"
description: "Free Framer component · by Richard de Jaroueh · Effects. AmbiLight Video Player Give your videos extra depth with a responsive ambient glow that mirrors the video content in real time."
canonical: "https://framer.elliotli.dev/component/ambilight-video"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/AmbiLight Video

# AmbiLight Video

Ambient glow effect for any video.

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

![AmbiLight Video preview image 1](https://framer.elliotli.dev/og/component/ambilight-video/37be026d65de1672/1600x1200.jpg)

## Summary

AmbiLight Video Player Give your videos extra depth with a responsive ambient glow that mirrors the video content in real time.

## Description

## AmbiLight Video Player

Give your videos extra depth with a responsive ambient glow that mirrors the video content in real time. The component renders a blurred “glow layer” behind the main player and automatically fades it in while playing.

### Features

-   Sources: Upload, direct Video URL (MP4/WebM/MOV), or YouTube (nocookie optional)
    
-   Ambilight controls: blur, spread/scale, intensity, saturation, brightness
    
-   Player controls: visible/invisible controls, autoplay, muted, loop, custom start time
    
-   Layout & style: border radius, shadow presets, object-fit (Fill / Fit / Stretch)
    

### How to use

1.  Drop the component onto your canvas.
    
2.  Choose a source (Upload / URL / YouTube).
    
3.  Tweak blur, spread, intensity, saturation, brightness to taste.
    
4.  Adjust radius, shadow, and object fit to match your layout.
    

### Notes

-   YouTube embeds: Depending on your region (e.g., EU), consent may be required. Update your privacy policy accordingly.
    
-   Performance: high blur values look great but can be GPU-intensive; tune blur/spread for mobile.
    
-   The glow respects playback state (fades in while playing, out when paused/ended).
    
-   Preview-video AI generated
    
-   Need help? Contact [mail@outofstorage.de](mailto:mail@outofstorage.de)
    

## Changelog (V2.0):

-   Fixed several reliability where the glow or video wouldn't load correctly or respond to autoplay, especially on mobile and Safari.
    

### New in V2.0

-   **Performance Mode** (YouTube): Replaces the second video stream with a static thumbnail as the glow layer — reduces bandwidth and prevents autoplay blocking on mobile.
    
-   **Squircle**: iOS-style corner smoothing via CSS corner-shape with adjustable strength (0–100%). Falls back to border-radius on unsupported browsers. Recommended for mobile breakpoints
    

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

-   All · #2488

## Details

- **Author**: Richard de Jaroueh
- **Published**: 2025-09-23
- **Updated**: 2026-03-13
- **Added**: 2025-09-12
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows