Video popup

Responsive YouTube video player inside lightbox triggered by specially styled button.

Createx component

Video popup component relies on 3rd party plugin. Make sure to link to Light Gallery css and js files in your document:
assets/vendor/lightgallery/css/lightgallery-bundle.min.css, assets/vendor/lightgallery/lightgallery.min.js and assets/vendor/lightgallery/plugins/video/lg-video.min.js.

Use this page as a reference.

Click me to watch video!

<!-- Play button: With label -->
<a href="link-to-youtube-video" class="btn-video me-3" data-gallery-video data-sub-html="<h6 class='fs-sm text-light'>Video caption</h6>"></a>
<span class="fs-sm text-muted">Click me to watch video!</span>

Sizing

Result
HTML

<!-- Default button size -->
<a href="link-to-youtube-video" class="btn-video" data-gallery-video></a>

<!-- Small button size -->
<a href="link-to-youtube-video" class="btn-video btn-video-lg" data-gallery-video></a>

On top of the image

Result
HTML

Click me to watch video!

<!-- Video button on top of the image -->
<div class="jumbotron position-relative bg-size-cover bg-position-center bg-no-repeat text-center mb-0 py-6" style="background-image: url(path-to-background-image);">
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-black opacity-50"></div>
  <div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-6">
    <a class="btn-video btn-video-lg mb-2" href="link-to-youtube-video" data-gallery-video data-sub-html="<h6 class='fs-sm text-light'>Video caption</h6>"></a>
    <br>
    <span class="fs-sm text-light">Click me to watch video!</span>
  </div>
</div>