Around Buy now

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

Sizing

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

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

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

On top of the image


Click me to watch video!
<!--  Video button on top of the image -->
<div class="jumbotron 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="cs-video-btn my-2" href="link-to-youtube/vimeo-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>
//  Video button on top of the image
.jumbotron.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="font-size-sm text-light">Video caption</h6>').cs-video-btn.my-2
  br
  span.font-size-sm.text-light Click me to watch video!
Top