Video Support

Lightbox.js supports the HTML5 video element, as well as YouTube embeds, and in this guide, we'll be taking a look at how to display these video elements in the lightbox.

Demo

Here is a quick demo if you'd like to see the video functionality in action.

Just click an image to view the lightbox:

Import

Firstly, import the SlideshowLightbox component required, as well as the CSS file which provides the styling for the library:

import 'lightbox.js-react/dist/index.css'
import {SlideshowLightbox} from 'lightbox.js-react'

Adding a license key

Next, a license key will need to be initialized in order to use the lightbox. If you require a license key, you can purchase an individual or team license here. However if your project is open-source, just use the contact form here to get a free license key, which you can use for your project.

Also, we're running a promotion currently, where you can get a 20% off discount with the coupon code OFFER20 at checkout.

The license key is initialized like so:

useEffect(() => {
    initLightboxJS("Insert License key", "Insert plan type here");
});

The two plan types are individual and team.

Adding Videos

Firstly, we're going to render a HTML5 video element in the lightbox, along with a YouTube video embed.

To do so, create an array of metadata objects, with each object containing the relevant metadata about the video. More information on the properties of each can be found below.

const media = [
  {
    type: "htmlVideo", 
    videoSrc:"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
    thumbnail:"https://peach.blender.org/wp-content/uploads/bbb-splash.png",
    alt: "Poster for the Big Buck Bunny film, featuring the bunny character in a green field, along with a purple butterfly"
  },
  { 
    type: "yt", 
    videoID :"IWVJq-4zW24",
    thumbnail: "https://img.youtube.com/vi/IWVJq-4zW24/hqdefault.jpg",
    alt: "Universe with stars"
  }
]

Then just pass this array to the SlideshowLightbox component:

<SlideshowLightbox images={media} lightboxIdentifier="lbox1" showThumbnails={true}>
        
        {items.map((item) => (
            <img
              src={item.thumbnail || item.src}
              alt={item.alt}
              height={500}
              width={500}
              data-lightboxjs="lbox1"
            />
        ))}
            
</SlideshowLightbox>

Here is the result:

Video Properties

There are various properties which can be used to contain metadata about the video element, such as the height and width, thumbnail image and so forth. Here's a guide to the properties for the HTML5 video element:

HTML5 Video Embed Properties

• type: There are two types of videos which can be rendered, YouTube embeds and HTML5 video elements. For YouTube embeds, the type is yt and for HTML5 video elements the type is htmlVideo
• videoSrc: Link to the video source
• autoPlay: Whether or not to automatically start playing the video once the lightbox is opened. (Boolean: true/false
• thumbnail: Link to the thumbnail image.
• videoHeight: Height of the HTML5 video element in pixels (default is 500px)
• videoWidth: Width of the HTML5 video element in pixels (default is 900px)

For example,

const media = [
  {
    type: "htmlVideo", 
    videoSrc:"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
    thumbnail:"https://peach.blender.org/wp-content/uploads/bbb-splash.png",
    alt: "Poster for the Big Buck Bunny film, featuring the bunny character in a green field, along with a purple butterfly"
  }
]

Adding A YouTube Video Embed

const media = [
  { 
    type: "yt", 
    videoID :"IWVJq-4zW24",
    thumbnail: "https://img.youtube.com/vi/IWVJq-4zW24/hqdefault.jpg",
    alt: "Universe with stars"
  }
]

YouTube Video Embed Properties

• type For YouTube embeds, the type should be set to yt (For HTML5 video elements the type is htmlVideo)
• videoID: YouTube video ID
• autoPlay: Whether or not to automatically start playing the YouTube video once the lightbox is opened. (Boolean: true/false
• thumbnail: Link to the thumbnail image. If displaying a YouTube embed, you can fetch the thumbnail image at this link: https://img.youtube.com/vi/VIDEO_ID_HERE/hqdefault.jpg
• videoHeight: Height of the YouTube video element in pixels (default is 500px)
• videoWidth: Width of the YouTube video element in pixels (default is 900px)

Demo

Here is a quick demo containing a HTML5 video element, YouTube embed, and image: