Sources

Custom sources

To display custom content—such as a Vimeo video, Google map, etc.—you have to pass the ID of a custom source with the "#" prefix to the "href" attribute.

<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
></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];

There might be a situation where you want to change the source's look when displayed in the lightbox. To achieve that, you can use the "data-class" attribute. The class will be added to the source in the lightbox:

<a data-fslightbox="lightbox" data-class="fslightbox-source" href="#vimeo">
	Image
</a>

<!-- A custom source on a website -->
<iframe
    src="https://player.vimeo.com/video/22439234"
    id="vimeo"
    frameBorder="0"
    allow="autoplay; fullscreen"
    allowFullScreen
></iframe>

<!-- The custom source in the lightbox -->
<iframe
    src="https://player.vimeo.com/video/22439234"
    id="vimeo"
    class="fslightbox-source"
    frameBorder="0"
    allow="autoplay; fullscreen"
    allowFullScreen
></iframe>

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;