How to set a thumbnail for custom video (e.g Youtube, Loom)

[gagandeepgill]

Is there a way to set a thumbnail that is not of type video?

For example here we are using #49 (comment) a youtube video, how would you set a poster prop on this?

[igordanchenko]

Yes, of course. You just need to define custom render.thumbnail function to render thumbnails for custom slides.

<Lightbox
  slides={[
    {
      type: "youtube",
      src: "https://www.youtube.com/embed/aqz-KE-bpKQ",
      thumbnail: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg",
      title: "Big Buck Bunny",
      width: 2160,
      height: 1215,
    },
  ]}
  plugins={[Thumbnails]}
  render={{
    slide: ({ slide, rect }) => // render custom slide
    thumbnail: ({ slide, ...rest }) =>
      slide.type === "youtube" ? (
        <ImageSlide slide={{ src: slide.thumbnail }} {...rest} />
      ) : undefined
  }}
  // ...
/>

https://codesandbox.io/p/sandbox/yet-another-react-lightbox-143-gznp29?file=%2Fsrc%2FApp.tsx