Video button

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

Cartzilla component

Play button with label

Click me to watch video!
<!-- Play button with label -->
<a href="link-to-youtube/vimeo-video" class="btn-video me-3" data-bs-toggle="video"></a>
<span class="fs-sm text-muted">Click me to watch video!</span>
// Play button with label
a(href="link-to-youtube/vimeo-video", data-bs-toggle="video").btn-video.me-3
span.fs-sm.text-muted Click me to watch video!

On top of the image


Click me to watch video!
<!-- Video button on top of the image -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-to-background-image);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-black opacity-50"></span>
  <div class="position-relative px-3 py-5 my-sm-5 text-center zindex-5">
    <a href="link-to-youtube/vimeo-video" class="btn-video my-2" data-bs-toggle="video"></a>
    <br>
    <span class="fs-sm text-light text-shadow">Click me to watch video!</span>
  </div>
</div>
// Video button on top of the image
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(path-to-background-image);")
  .position-absolute.top-0.start-0.w-100.h-100.bg-black.opacity-50
  .position-relative.px-3.py-5.my-sm-5.text-center.zindex-5
    a(href="link-to-youtube/vimeo-video",  data-bs-toggle="video").btn-video.my-2
    br
    span.fs-sm.text-light.text-shadow Click me to watch video!
Top