YouTube

Usage

'use client'
import { YouTubeAmbilight } from '@videoglow/react-youtube'

export const metadata = {
  title: 'YouTube',
  alternates: { canonical: '/youtube' },
}

export function Player() {
  return (
    <YouTubeAmbilight
      videoId="I5QDO6BsWnU"
      glow={{ blur: 80, opacity: 0.5, saturation: 3 }}
      sync={{ driftToleranceSeconds: 0.25, checkIntervalMs: 1000 }}
    />
  )
}

How it works

Browsers never expose the pixels of a cross-origin iframe, so the glow is a second, muted YouTube player under a CSS filter. The visible player is the clock. The coordinator mirrors play, pause, buffering, ending and playback rate through events, and checks drift once per second while playing. A corrective seek is issued only when the drift exceeds the tolerance. The old implementation seeked on every animation frame.