How to Embed Light Box in Video.js

Introduction

Video.js is a powerful and flexible HTML5 video player that offers a wide range of customization options. One popular feature that can enhance the user experience is a light box, which allows viewers to focus on the video content without distractions.

Integrating a light box with Video.js can create an immersive viewing experience for your audience. This combination is particularly useful for websites that showcase multiple videos or require a clean, distraction-free environment for video playback.

Table of Contents

Introduction
Setting Up Your Project
Creating the Video Component
Implementing the Light Box
Using the VideoLightbox Component
Customizing the Light Box
- Adding Custom Controls
A Working component

In this guide, we'll walk you through the process of embedding a light box in Video.js using React and TypeScript. We'll cover the necessary steps, from setting up your project to implementing the final solution.

Setting Up Your Project

Before we dive into the implementation, let's set up a new React project with TypeScript using Vite. If you haven't already, you can create a new project using the following commands:

npm create vite@latest my-video-lightbox -- --template react-ts
cd my-video-lightbox
npm install

Once your project is set up, install the required dependencies:

npm install video.js @types/video.js yet-another-react-lightbox

Creating the Video Component

Let's start by creating a reusable Video component that utilizes Video.js:

import React, { useEffect, useRef } from 'react'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

interface VideoProps {
  src: string
  poster?: string
}

export default function Video({ src, poster }: VideoProps) {
  const videoRef = useRef<HTMLVideoElement>(null)
  const playerRef = useRef<videojs.Player | null>(null)

  useEffect(() => {
    if (videoRef.current) {
      playerRef.current = videojs(videoRef.current, {
        controls: true,
        fluid: true,
        preload: 'auto',
      })
    }

    return () => {
      if (playerRef.current) {
        playerRef.current.dispose()
      }
    }
  }, [])

  return (
    <div data-vjs-player>
      <video
        ref={videoRef}
        className="video-js"
        poster={poster}
      >
        <source src={src} type="video/mp4" />
      </video>
    </div>
  )
}

This component creates a Video.js player instance and handles its lifecycle.

Implementing the Light Box

Now, let's create a component that combines our Video component with a light box using "yet-another-react-lightbox":

import React, { useState } from 'react'
import Lightbox from 'yet-another-react-lightbox'
import 'yet-another-react-lightbox/styles.css'
import Video from './Video'

interface VideoLightboxProps {
  src: string
  poster?: string
}

export default function VideoLightbox({ src, poster }: VideoLightboxProps) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <div onClick={() => setIsOpen(true)}>
        <Video src={src} poster={poster} />
      </div>
      <Lightbox
        open={isOpen}
        close={() => setIsOpen(false)}
        render={{
          slide: () => (
            <div style={{ width: '100%', height: '100%' }}>
              <Video src={src} />
            </div>
          ),
        }}
      />
    </>
  )
}

This component uses the "yet-another-react-lightbox" library to create a light box effect around our Video component.

Using the VideoLightbox Component

You can now use the VideoLightbox component in your application:

import React from 'react'
import VideoLightbox from './VideoLightbox'

export default function App() {
  return (
    <div className="App">
      <h1>Video.js with Light Box</h1>
      <VideoLightbox
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        poster="/static/images/bigBuckBunnyPoster.png"
      />
    </div>
  )
}

Customizing the Light Box

To further enhance the user experience, you can customize the light box appearance and behavior. Here are some options you can explore:

Adding custom controls
Implementing keyboard navigation
Customizing the light box overlay style

Adding Custom Controls

You can add custom controls to the light box by using the toolbar prop of the Lightbox component:

import React, { useState } from 'react'
import Lightbox from 'yet-another-react-lightbox'
import 'yet-another-react-lightbox/styles.css'
import Video from './Video'

interface VideoLightboxProps {
  src: string
  poster?: string
}

export default function VideoLightboxWithControls({ src, poster }: VideoLightboxProps) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <div onClick={() => setIsOpen(true)}>
        <Video src={src} poster={poster} />
      </div>
      <Lightbox
        open={isOpen}
        close={() => setIsOpen(false)}
        render={{
          slide: () => (
            <div style={{ width: '100%', height: '100%' }}>
              <Video src={src} />
            </div>
          ),
        }}
        toolbar={{
          buttons: [
            <button key="custom-button" onClick={() => console.log('Custom action')}>
              Custom Button
            </button>,
          ],
        }}
      />
    </>
  )
}

This example adds a custom button to the light box toolbar.

A Working component

Using all the above knowledge, here's a real component that I have embedded in this page:

Video Link: https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4