Video Plugin

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


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

type"video"video slide type marker

  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
if true, the video automatically begins to play
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
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
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.


  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 }


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

// ...

return (
        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.


Edit on StackBlitz