Gallery with Video Player

                    
                      <!-- Video Block -->
                      <div id="youTubeVideoPlayer" class="video-player bg-dark rounded">
                        <img class="img-fluid video-player-preview rounded" src="../../assets/img/1920x800/img10.jpg" alt="Image">

                        <!-- Play Button -->
                        <a class="js-inline-video-player video-player-btn video-player-centered shadow-soft rounded-circle" href="javascript:;"
                           data-hs-video-player-options='{
                             "videoId": "0qisGSwZym4",
                             "parentSelector": "#youTubeVideoPlayer",
                             "targetSelector": "#youTubeVideoIframe",
                             "isAutoplay": true,
                             "classMap": {
                               "toggle": "video-player-played"
                             }
                           }'>
                          <span class="video-player-icon">
                            <i class="fas fa-play"></i>
                          </span>
                        </a>
                        <!-- End Play Button -->

                        <!-- Video Iframe -->
                        <div class="embed-responsive embed-responsive-16by9 rounded">
                          <div id="youTubeVideoIframe"></div>
                        </div>
                        <!-- End Video Iframe -->
                      </div>
                      <!-- End Video Block -->
                    
                  

                    
                      <link rel="stylesheet" href="../../assets/vendor/fancybox/dist/jquery.fancybox.min.css">
                    
                  

                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/hs-video-player/dist/hs-video-player.min.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // initialization of video player
                          $('.js-inline-video-player').each(function () {
                            var videoPlayer = new HSVideoPlayer($(this)).init();
                          });
                        });
                      </script>
                    
                  

                    
                      <!-- Video Content Section -->
                      <div class="d-flex container-fluid py-3">
                        <div class="d-flex justify-content-center align-items-center flex-column w-100 min-vh-100 bg-img-hero-center text-center rounded" style="background-image: url(../../assets/img/1920x1080/img23.jpg);">
                          <!-- Fancybox -->
                          <a class="js-fancybox video-player video-player-btn" href="javascript:;"
                             data-hs-fancybox-options='{
                               "src": "//youtube.com/0qisGSwZym4",
                               "caption": "Front - Responsive Website Template",
                               "speed": 700,
                               "buttons": ["fullScreen", "close"],
                               "vimeo": {
                                 "autoplay": 1
                               }
                             }'>
                            <span class="video-player-icon">
                              <i class="fas fa-play"></i>
                            </span>
                          </a>
                          <!-- End Fancybox -->
                        </div>
                      </div>
                      <!-- End Video Content Section -->