Video Lightbox

This component displays a single video in a lightbox with a fade-in and fade-out animation. YouTube videos, HTML5 videos and custom video embeds (such as Vimeo or Wistia players) are all supported. For displaying multiple images and videos in a slideshow format (with thumbnails, slideshow functionality etc), see the Slideshow Lightbox component instead.

The following features are supported:

• YouTube videos: Embed any YouTube video by passing its video ID.
• HTML5 videos: Display self-hosted video files with the browser's native video controls.
• Custom embeds: Pass in any video player component or iframe, such as a Vimeo or Wistia embed.
• Animations: A fade-in entry animation is displayed when the lightbox opens, and a fade-out animation is displayed when the user exits from the lightbox.

import {VideoLightbox} from "lightbox.js-react"

Usage

Pass the video you'd like to display to the mediaItem prop, and control whether the lightbox is open with the open prop. Use the onClose callback to keep your state in sync when the user closes the lightbox:

const [open, setOpen] = useState(false);

<button onClick={() => setOpen(true)}>Watch video</button>

<VideoLightbox
  open={open}
  onClose={() => setOpen(false)}
  mediaItem={{ type: "yt", videoID: "IWVJq-4zW24" }}
/>

Always reset your open state in onClose. Otherwise, the lightbox can't be reopened, since open would already be true.

Video Types

The type property of the mediaItem object determines how the video is rendered.

YouTube

Set type to "yt" and pass the YouTube video's ID to videoID. The ID is the part of the URL after watch?v=.

<VideoLightbox
  mediaItem={{ type: "yt", videoID: "IWVJq-4zW24", caption: "My YouTube video" }}
  ...
/>

HTML5 Video

Set type to "htmlVideo" and pass the video file's URL to videoSrc. The video is rendered with the browser's native controls.

<VideoLightbox
  mediaItem={{ type: "htmlVideo", videoSrc: "/videos/demo.mp4", caption: "Product demo" }}
  ...
/>

Custom Video Embed

Set type to "customVideoEmbed" and pass any React element to embed, such as a Vimeo iframe or your own video player component.

<VideoLightbox
  mediaItem={{
    type: "customVideoEmbed",
    embed: (
      <iframe
        src="https://player.vimeo.com/video/76979871"
        width="640"
        height="360"
        allow="autoplay; fullscreen"
        allowFullScreen
      />
    ),
  }}
  ...
/>

Full example

import React, { useState } from 'react'
import {VideoLightbox} from 'lightbox.js-react'

function Demo() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(true)}>Watch video</button>

      <VideoLightbox
        open={open}
        onClose={() => setOpen(false)}
        mediaItem={{ type: "yt", videoID: "IWVJq-4zW24"}}
      />
    </div>
  )
}

<VideoLightbox theme="night" ... />

<VideoLightbox backgroundColor="rgba(12, 12, 12, 0.8)" ... />

<VideoLightbox iconColor="silver" ... />

<VideoLightbox
  mediaItem={{ type: "yt", videoID: "IWVJq-4zW24", caption: "My video" }}
  ...
/>

<VideoLightbox fullScreen={true} ... />

<VideoLightbox modalClose="clickOutside" ... />

<VideoLightbox showFullScreenIcon={false} ... />

<VideoLightbox showControls={false} ... />

<VideoLightbox
  closeComponent={<span>Close</span>}
  controlComponent={<ShareIcon />}
  lightboxFooterComponent={<p>Video courtesy of ...</p>}
  ...
/>

<VideoLightbox
  onOpen={(item) => console.log("Opened", item)}
  onClose={(item) => setOpen(false)}
  onError={(event, message) => console.error(message, event)}
  ...
/>

mediaItem Properties

type: String - The type of video. One of "yt", "htmlVideo" or "customVideoEmbed"

videoID: String - The YouTube video ID. Required when type is "yt"

videoSrc: String - The URL of the video file. Required when type is "htmlVideo"

embed: ReactNode - The video embed to render. Required when type is "customVideoEmbed"

caption: String - Optional caption displayed with the video

Props

mediaItem: Object - The video to display. See mediaItem Properties above

open: Boolean - Whether the lightbox is open

onOpen: Function - Called with the mediaItem when the lightbox opens

onClose: Function - Called with the mediaItem when the lightbox closes

onError: Function - Called with the error event and a message if the video fails to load

theme: String - The theme to be applied to the lightbox. Options include day, night, lightbox

backgroundColor: String - The background color of the lightbox, as a CSS color name, RGBA value or HEX code

iconColor: String - The icon color for the lightbox, as a CSS color name, RGBA value or HEX code

fullScreen: Boolean - Whether the lightbox takes up the screen's full width and height

modalClose: String - If set to "clickOutside", the lightbox will close if the outside of the video is clicked

showControls: Boolean - Whether or not to display the controls. Only the close icon will be displayed if set to false

showControlsBar: Boolean - Whether or not to display the controls bar. Defaults to true

showFullScreenIcon: Boolean - Whether or not to display the full-screen icon

iconStyle: Object - Custom inline styles for the control icons

closeIconBtnStyle: Object - Custom inline styles for the close button

closeComponent: ReactNode - Custom component to replace the default close icon

controlComponent: ReactNode - Custom component added to the controls

lightboxFooterComponent: ReactNode - Custom component rendered at the bottom of the lightbox

className: String - Custom classname(s) for the component's wrapper element

children: ReactNode - Content rendered inline on the page (outside the lightbox), such as a thumbnail or button