![Cartzilla](../img/logo-dark.png)
Video button
Responsive YouTube and Vimeo video players inside lightbox triggered by specially styled button.
Cartzilla component
Play button with label
<!-- Play button with label -->
<a href="link-to-youtube-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-video", data-bs-toggle="video").btn-video.me-3
span.fs-sm.text-muted Click me to watch video!
On top of the image
<!-- 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-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-video", data-bs-toggle="video").btn-video.my-2
br
span.fs-sm.text-light.text-shadow Click me to watch video!