Sources

Custom sources

To display custom content—such as a Vimeo video, Google map, etc.—pass the ID of a custom source with the "#" prefix to the "href" attribute. The custom source will be instantly removed from the DOM on a page's load; and in the lightbox, the "display" CSS property will be overriden.

<a data-fslightbox="lightbox" href="#vimeo">
	Image
</a>
<iframe
    src="https://player.vimeo.com/video/22439234"
    id="vimeo"
    width="1920px"
    height="1080px"
    frameBorder="0"
    allow="autoplay; fullscreen"
    allowFullScreen
    style="display:none"
></iframe>

Or, through JavaScript, provide the desired DOM element to the "sources" array prop.

var instance = new FsLightbox();
var v = document.createElement("iframe");
v.src = "https://player.vimeo.com/video/22439234";
v.width = "1920px";
v.height = "1080px";
v.frameBorder = 0;
v.allow = "fullscreen";
instance.props.sources = [v];

Autoplay

Autoplay is supported for HTML and YouTube videos. Append the "data-autoplay" attribute to a video's <a> tag:

<a data-fslightbox href=1.mp4 data-autoplay>

fsLightbox.props.autoplay = true;