Youtube Video Ambient

A video player with real-time ambient glow that mirrors the colors playing — just like YouTube's ambient mode.

Installation

File Structure

video-ambient.tsx

Usage

import { VideoAmbient } from "@/components/unlumen-ui/video-ambient";

export default function Page() {
  return <VideoAmbient src="/your-video.mp4" poster="/your-poster.jpg" />;
}

API Reference

VideoAmbient

src

string

—

Video file URL.

poster?

string

—

Poster image shown before playback starts.

blurAmount?

number

60

Blur radius of the glow layer in pixels.

intensity?

number

0.85

Opacity of the glow layer (0–1).

autoPlay?

boolean

false

Start playback automatically on load. Must be combined with `muted` — browsers block unmuted autoplay.

muted?

boolean

false

Mute the video. Required for `autoPlay` to work in all browsers.

className?

string

—

Additional class names on the wrapper element.

Notes

The ambient glow is powered by a <canvas> element that samples frames from the main video via drawImage() in a requestAnimationFrame loop — the same technique YouTube uses for ambient mode. The canvas is rendered at a very low resolution (64×36 px) and upscaled with a heavy CSS blur, so the cost is negligible even at 4K playback.
Because the canvas is updated through the normal browser paint cycle (not a promoted GPU layer), adjacent elements — such as the title, description, or any content below the player — receive ambient color in real time with no extra tricks.
Browsers require a video to be muted for autoPlay to work. Pass both props together when you want the video to start on load; the user can unmute via the native controls.
To extend the glow visually beyond the video edges, wrap the component in a container with overflow: visible and add padding.
Increase blurAmount for a wider, softer halo; decrease it for a tighter, more vivid glow.

Credits

Built by Léo. Inspired by YouTube's ambient mode feature.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.