Video Plugin

Video plugin adds support for video slides via HTML <video> player.

Documentation

The plugin adds video Slide type with the following attributes. Most attributes are identical to the ones present in the <video> HTML element.

PropertyTypeDescription
type"video"video slide type marker
sources

{
  src: string;
  type: string;
  media?: string;
}[]

an array of video files

  • src - video source URL
  • type - video source type (e.g., video/mp4)
  • media - media query for the resource's intended media (e.g., (min-width: 800px))
posterstringvideo placeholder image
widthnumbervideo width in pixels
heightnumbervideo height in pixels
autoPlayboolean
if true, the video automatically begins to play
controlsboolean
if true, the browser will offer controls to allow the user to control video playback
controlsListstringindicates what controls to show
crossOriginstringindicates whether to use CORS to fetch the related video
preloadstringvideo preload setting
loopboolean
if true, the browser will automatically seek back to the start upon reaching the end of the video
mutedbooleanthe default setting of the audio contained in the video
playsInlineboolean
if true, the video is to be played "inline", that is within the element's playback area
disablePictureInPicturebooleanprevents the browser from suggesting a Picture-in-Picture context menu
disableRemotePlaybackbooleandisables the capability of remote playback

Additionally, the Video plugin adds the following Lightbox properties, which can be used as defaults for all video slides within a lightbox.

PropertyTypeDescription
video

{
  autoPlay?: boolean;
  controls?: boolean;
  controlsList?: string;
  crossOrigin?: string;
  preload?: string;
  loop?: boolean;
  muted?: boolean;
  playsInline?: boolean;
  disablePictureInPicture?: boolean;
  disableRemotePlayback?: boolean;
}

All attributes are identical to the ones described above.

Defaults: { controls: true, playsInline: true }

Example

import Lightbox from "yet-another-react-lightbox";
import Video from "yet-another-react-lightbox/plugins/video";
import "yet-another-react-lightbox/styles.css";

// ...

return (
  <Lightbox
    plugins={[Video]}
    slides={[
      {
        type: "video",
        width: 1280,
        height: 720,
        poster: "/public/poster-image.jpg",
        sources: [
          {
            src: "/public/video.mp4",
            type: "video/mp4",
          },
        ],
      },
      // ...
    ]}
    // ...
  />
);

Live Demo

You can adjust the live demo settings below.

Sandbox

Edit on StackBlitz