Video popup

Responsive YouTube and Vimeo video players 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.js/dist/css/lightgallery.min.css, assets/vendor/lightgallery.js/dist/js/lightgallery.min.js and assets/vendor/lg-video.js/dist/lg-video.min.js.

Use this page as a reference.

Click me to watch video!

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

Sizing

Result
HTML

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

<!-- Small button size -->
<a href="link-to-youtube/vimeo-video" class="cs-video-btn cs-video-btn-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-5" style="background-image: url(path-to-background-image);">
  <div class="bg-overlay rounded opacity-25"></div>
  <div class="bg-overlay-content my-5 py-5">
    <a class="cs-video-btn cs-video-btn-lg mb-2" href="link-to-youtube/vimeo-video" data-gallery-video data-sub-html="<h6 class='font-size-sm text-light'>Video caption</h6>"></a>
    <br>
    <span class="font-size-sm text-light">Click me to watch video!</span>
  </div>
</div>