React-ambilight NPM

🌈 Video Ambilight

A lightweight React component to create a stunning Ambilight effect for YouTube videos. This package is inspired by the visual effects seen in modern video presentations, adding an immersive ambient glow that synchronizes with your content.

✨ Features

Works seamlessly with YouTube videos using the YouTube IFrame API.
Supports synchronized playback between the video and the Ambilight effect.
Customizable and easy to integrate into any React project.

📦 Installation

Install the package via npm:

npm install react-ambilight

or using Yarn:

yarn add react-ambilight

🔧 Usage

Here's a quick example of how to use the component:

import React from 'react'
import { VideoAmbilight } from 'react-ambilight'
import 'react-ambilight/dist/style.css'

export default function App() {
  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <VideoAmbilight videoId='dQw4w9WgXcQ' />
    </div>
  )
}

Customize the component by passing a className or classNames object with custom class names:

// tailwind example
import React from 'react'
import { VideoAmbilight } from 'react-ambilight'
import 'react-ambilight/dist/style.css'

export default function App() {
  return (
    <div className='max-w-4xl mx-auto'>
      <VideoAmbilight
        videoId='dQw4w9WgXcQ'
        classNames={{
          videoWrapper: 'relative',
          ambilightWrapper: 'absolute inset-0',
          aspectRatio: 'aspect-w-16 aspect-h-9',
          ambilight: 'bg-black opacity-50',
          ambilightVideo: 'hidden',
        }}
      />
    </div>
  )
}

Props

Prop	Type	Description	Required
`videoId`	`string`	The YouTube video ID to display.	Yes
`className`	`string`	Optional class name for styling.	No
`classNames`	`object`	Optional object for custom class names.	No

classNames Object

The classNames object can have the following properties:

Property	Type	Description
`videoWrapper`	`string`	Class name for the video wrapper.
`ambilightWrapper`	`string`	Class name for the ambilight wrapper.
`aspectRatio`	`string`	Class name for the aspect ratio container.
`ambilight`	`string`	Class name for the ambilight effect container.
`ambilightVideo`	`string`	Class name for the ambilight video container.

🚀 Demo

Check out a live demo of the Ambilight effect: Live Demo

🛠 How It Works

The component leverages the YouTube IFrame API to create two synchronized players:

Primary Player: Displays the video.
Ambilight Player: Runs a low-quality version of the same video in the background to generate the glowing effect.