Sources
There are 3 types of supported sources: images, videos, YouTube videos. Just pass link to href attribute.
<a data-fslightbox="gallery" href="https://i.imgur.com/fsyrScY.jpg">Image</a>
<a data-fslightbox="gallery" href="https://www.youtube.com/watch?v=3nQNiWdeH2Q">YouTube video</a>
<a data-fslightbox="gallery" href="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">HTML video</a>
<a data-fslightbox="gallery" href="https://www.youtube.com/watch?v=3nQNiWdeH2Q">YouTube video</a>
<a data-fslightbox="gallery" href="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">HTML video</a>
Custom sources
To display custom content such as Vimeo videos, Google maps, etc. you need to pass id of custom source with # prefix to 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>
<iframe
src="https://player.vimeo.com/video/22439234"
id="vimeo"
width="1920px"
height="1080px"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen>
</iframe>
There might be a situation in which you want to change source look when displayed in lightbox. To achieve that you can use data-class attribute. That class will be added to source in lightbox:
<a
data-fslightbox="lightbox"
data-class="fslightbox-source"
href="#vimeo">
Image
</a>
<!-- Custom source in website code -->
<iframe
src="https://player.vimeo.com/video/22439234"
id="vimeo"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen>
</iframe>
<!-- Custom source in lightbox -->
<iframe
src="https://player.vimeo.com/video/22439234"
id="vimeo"
class="fslightbox-source"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen>
</iframe>
data-fslightbox="lightbox"
data-class="fslightbox-source"
href="#vimeo">
Image
</a>
<!-- Custom source in website code -->
<iframe
src="https://player.vimeo.com/video/22439234"
id="vimeo"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen>
</iframe>
<!-- Custom source in lightbox -->
<iframe
src="https://player.vimeo.com/video/22439234"
id="vimeo"
class="fslightbox-source"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen>
</iframe>