Add Background Glow to Videos with Ambient.js

Ambient Video Lights is a JavaScript library that adds cinematic background glow effects to HTML5 videos. This effect creates a more immersive viewing experience. If your video content focuses on vibrant visuals or dramatic scenes, this library can make those elements more impactful.

You have two modes to choose from. Live Drawing is perfect if you need the glow to react instantly to on-screen changes. The VTT Sprite mode, is best for situations where performance is critical. Because it relies on pre-rendered sprites, it uses less processing power.

See it in action:

How to use it:

1. Include the library’s CSS and JavaScript files in your HTML document:

<link rel="stylesheet" href="path/to/ambient.min.css">
<script src="path/to/ambient.min.js"></script>

2. Place your video element inside a wrapper div:

<div class="player-wrapper">
  <video id="player" src="/path/to/video.mp4" controls></video>
</div>

3. Create a new Ambient instance and mount it:

const player = document.getElementById('player');
const ambient = new Ambient('.player-wrapper');
ambient.mount();

4. Using Sprite Mode: If you prepared a VTT file. You can use this method.

const ambient = new Ambient('.player-wrapper', {
  vtt: 'path/to/sprite.vtt',
});

5. You can change the background glow by overriding these CSS variables:

• –blur-amount: Controls the blurriness (default: 45px).
• –frames-buffer: Sets the frame interval in sprite mode (default: 2s).
• –scale-factor: Adjusts the glow’s size in sprite mode (default: 1.05).

Technical Overview:

The library’s Ambient class checks for valid video containers and initializes a canvas element. In Live mode, it uses requestAnimationFrame to redraw video frames with blur effects.

For VTT mode, it parses timestamped sprite coordinates from a WEBVTT file, loading relevant thumbnails during playback. Event listeners on timeupdate and play synchronize visual changes with video progress.

Changelog:

02/20/2025

• frame limit to reduce cpu usage

02/15/2025

• fix: ensure proper cleanup of wrapper element

02/11/2025

• fix for Safari/iOS compatibility