Demos

React video gallery component

View as Markdown Open in Claude Open in ChatGPT

@lightgallery/react plays YouTube, Vimeo, Wistia and self-hosted HTML5 video (MP4, WebM, Ogg) in a full-screen lightbox. Provider slides render as poster facades, so no third-party iframe, script or cookie loads until the viewer presses play. The full component API is in the React package docs.

Demo

Open in StackBlitz
Provider videos

Point a slide’s src at a YouTube, Vimeo or Wistia URL, the Video plugin recognises it and builds the embed. poster supplies the facade image; YouTube posters are fetched automatically when you omit it.

import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Video from '@lightgallery/react/plugins/video';

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-video.css';

const videos = [
    {
        src: 'https://youtu.be/IUN664s7N-c',
        caption: <h4>Peck Pocketed by Kevin Herron</h4>,
    },
    {
        src: 'https://vimeo.com/112836958',
        poster: 'img/vimeo-poster.jpg',
        caption: <h4>Nature</h4>,
    },
];

export function VideoGallery() {
    return (
        <LightGallery plugins={[Thumbnail, Video]}>
            {videos.map((video) => (
                <LightGalleryItem key={video.src} item={video}>
                    <img src={video.poster ?? 'img/youtube-thumb.jpg'} alt="" />
                </LightGalleryItem>
            ))}
        </LightGallery>
    );
}
HTML5 videos

Self-hosted video takes a video object with the sources, tracks and the attributes to put on the <video> element. Leave src off for these slides:

const items = [
    {
        video: {
            source: [{ src: 'videos/video1.mp4', type: 'video/mp4' }],
            tracks: [
                {
                    src: 'videos/captions-en.vtt',
                    kind: 'captions',
                    srclang: 'en',
                    label: 'English',
                    default: 'true',
                },
            ],
            attributes: { preload: false, controls: true },
        },
        poster: 'img/html5-video-poster.jpg',
        caption: <h4>Peck Pocketed</h4>,
    },
];
Facades and playback settings

Every Video plugin setting lives on the video prop:

<LightGallery
    slides={videos}
    plugins={[Thumbnail, Video]}
    video={{
        // both are the defaults
        videoFacade: true,
        youTubeNoCookie: true,
        // autoplay forces an immediate embed by design, turn it off
        // to keep the facade on the first slide too
        autoplayFirstVideo: false,
        gotoNextSlideOnVideoEnd: true,
    }}
/>

Facades cut roughly 990 KB and 14 requests per YouTube slide until playback starts, how the poster chain resolves is covered in the video facades guide.

More in the React package docs, or see the React image gallery and React video carousel demos.

Edit this page on GitHub