Video popup

Responsive YouTube and Vimeo video players inside lightbox triggered by specially styled button.

Around component

Play button: Style 1

Click me to watch video!
<!-- Play button: Style 1 with label -->
<a href="link-to-youtube/vimeo-video" class="btn-video me-3" 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>
// Play button: Style 1 with label
a(href="link-to-youtube/vimeo-video", data-sub-html='<h6 class="fs-sm text-light">Video caption</h6>').btn-video.me-3
span.fs-sm.text-muted Click me to watch video!

Play button: Style 2

Click me to watch video!
<!-- Play button: Style 2 with label -->
<a href="link-to-youtube/vimeo-video" class="btn-video btn-video-primary me-3" 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>
// Play button: Style 2 with label
a(href="link-to-youtube/vimeo-video", data-sub-html='<h6 class="fs-sm text-light">Video caption</h6>').btn-video.btn-video-primary.me-3
span.fs-sm.text-muted Click me to watch video!

Sizing

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

<!-- Small button size -->
<a href="link-to-youtube/vimeo-video" class="btn-video btn-video-sm"></a>
// Default button size
a(href="link-to-youtube/vimeo-video").btn-video

// Small button size
a(href="link-to-youtube/vimeo-video").btn-video.btn-video-sm

On top of the image


Click me to watch video!
<!--  Video button on top of the image -->
<div class="bg-size-cover bg-position-center bg-no-repeat text-center py-7 mb-0" style="background-image: url(path-to-background-image);">
  <a class="btn-video my-2" href="link-to-youtube/vimeo-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>
//  Video button on top of the image
.rounded-3.bg-size-cover.bg-position-center.bg-no-repeat.text-center.py-7.mb-0(style="background-image: url(path-to-background-image);")
  a(href="link-to-youtube/vimeo-video", data-sub-html='<h6 class="fs-sm text-light">Video caption</h6>').btn-video.my-2
  br
  span.fs-sm.text-light Click me to watch video!
Top