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>

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>

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>

Vanilla JS Lightbox Documentation

Official Fullscreen Lightbox guide!

Sources

Custom sources