Sources

There are 3 types of sources supported out-of-the-box: images, HTML videos, and YouTube videos. To display such a source, pass its URL or path to the "sources" array prop.

import React, { useState } from "react";
import FsLightbox from "fslightbox-react";
import ExampleComponent from "ExampleComponent.jsx";

function App() {
	const [toggler, setToggler] = useState(false);

	return (
		<>
			<button onClick={() => setToggler(!toggler)}>
				Open the lightbox.
			</button>
			<FsLightbox
				toggler={toggler}
				sources={[
					<iframe
						src="https://player.vimeo.com/video/22439234"
						width="1920px"
						height="1080px"
						frameBorder="0"
						allow="autoplay; fullscreen"
						allowFullScreen
					/>,
					<iframe
						src="//maps.google.com/maps?q=?&q=London&output=embed"
						width="1920px"
						height="1080px"
						allowFullScreen="allowfullscreen"
						scrolling="no"
						allow="autoplay; fullscreen"
					/>,
					<ExampleComponent
						width="200px"
						height="300px"
					/>
				]}
			/>
		</>
	);
}

<FsLightbox sources={["1.mp4"]} autoplay />