Vendor : Fancybox

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

License: GPLv3 & Commercial
https://github.com/fancyapps/fancybox
src/js/vendors/vendor.fancybox.js

Fancybox license allow you to create a project for you (or for your customer).

Extract from fancybox license agreement:
Customers and users of your product do not need to purchase their own license – as long as they are not developing their own commercial products with fancybox.

                  
                    <!-- href = image full size -->
                    <a class="fancybox" href="demo.files/images/unsplash/covers/room-7DzpP1IVo8Y-unsplash.jpg">
                      <!-- thumbnail -->
                      <img class="img-fluid" src="demo.files/images/unsplash/covers/thumb_330/room-7DzpP1IVo8Y-unsplash.jpg" alt="..." />
                    </a>

Fancybox Gallery

Preview
HTML

                  
                    <!--
                      Color Schemas
                      .fancybox-white
                      .fancybox-dark
                      .fancybox-primary   (default)
                      .fancybox-secondary
                      .fancybox-danger
                      .fancybox-success
                      .fancybox-warning
                      .fancybox-info
                      .fancybox-pink
                      .fancybox-indigo
                      .fancybox-purple
                    -->
                    <div class="row g-4">
                      <div class="col-12 col-lg-3 mb-4">

                        <a class="fancybox fancybox-primary" data-fancybox="gallery" href="demo.files/images/unsplash/covers/room-l9QPabiKKhw-unsplash.jpg">
                          <img class="img-fluid" src="demo.files/images/unsplash/covers/room-l9QPabiKKhw-unsplash.jpg" alt="..." />
                        </a>

                      </div>

                      <div class="col-12 col-lg-3 mb-4">

                        <a class="fancybox fancybox-primary" data-fancybox="gallery" href="demo.files/images/unsplash/covers/room-iFIht7bf-Cs-unsplash.jpg">
                          <img class="img-fluid" src="demo.files/images/unsplash/covers/room-iFIht7bf-Cs-unsplash.jpg" alt="..." />
                        </a>

                      </div>

                      <div class="col-12 col-lg-3 mb-4">

                        <a class="fancybox fancybox-primary" data-fancybox="gallery" href="demo.files/images/unsplash/covers/room-fitPHO9yh_s-unsplash.jpg">
                          <img class="img-fluid" src="demo.files/images/unsplash/covers/room-fitPHO9yh_s-unsplash.jpg" alt="..." />
                        </a>

                      </div>

                      <div class="col-12 col-lg-3 mb-4">

                        <a class="fancybox fancybox-primary" data-fancybox="gallery" href="demo.files/images/unsplash/covers/room-_A_UV188rqk-unsplash.jpg">
                          <img class="img-fluid" src="demo.files/images/unsplash/covers/room-_A_UV188rqk-unsplash.jpg" alt="..." />
                        </a>

                      </div>

                    </div>

Fancybox Video

Preview
HTML

Youtube

Vimeo

Local Video

                  
                    <!-- youtube -->
                    <a class="d-inline-block fancybox overlay-dark overlay-opacity-4" href="https://www.youtube.com/watch?v=YXNk4gQCPSY">
                      <img class="img-fluid" src="https://img.youtube.com/vi/YXNk4gQCPSY/maxresdefault.jpg" alt="..." />
                      <!-- play button -->
                      <span class="absolute-full d-flex align-items-center justify-content-center">
                        <span class="d-inline-flex bg-white text-dark rounded-circle align-items-center justify-content-center shadow-lg" style="width:70px;height:70px;">
                          <i class="fi fi-arrow-end-full lh-1 fs-4"></i>
                        </span>
                      </span>
                    </a>

                  
                    <!-- vimeo -->
                    <a class="d-inline-block fancybox overlay-dark overlay-opacity-4" href="https://vimeo.com/57005606">
                      <img class="img-fluid" src="https://i.vimeocdn.com/video/394855173_1280x720.jpg" alt="..." />
                      <!-- play button -->
                      <span class="absolute-full d-flex align-items-center justify-content-center">
                        <span class="d-inline-flex bg-white text-dark rounded-circle align-items-center justify-content-center shadow-lg" style="width:70px;height:70px;">
                          <i class="fi fi-arrow-end-full lh-1 fs-4"></i>
                        </span>
                      </span>
                    </a>

                  
                    <!-- local video -->
                    <a class="d-inline-block fancybox overlay-dark overlay-opacity-4" href="#localvideo">
                      <img class="img-fluid" src="../demo.files/video/hd0936.jpg" alt="..." />
                      <!-- play button -->
                      <span class="absolute-full d-flex align-items-center justify-content-center">
                        <span class="d-inline-flex bg-white text-dark rounded-circle align-items-center justify-content-center shadow-lg" style="width:70px;height:70px;">
                          <i class="fi fi-arrow-end-full lh-1 fs-4"></i>
                        </span>
                      </span>
                    </a>