Buy now
Video popup
Responsive YouTube and Vimeo video players inside lightbox triggered by specially styled button.
Around component
Gallery component relies on 3rd party plugin. Make sure to link to Light Gallery css and js files in your document: vendor/lightgallery.js/dist/css/lightgallery.min.css and lightgallery.js/dist/js/lightgallery.min.js. To display Vimeo or YouTube video in lightbox you need to include additional plugin:
- vendor/lg-video.js/dist/lg-video.min.js
Use this page as a reference.
Play button: Style 1
<!-- 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
<!-- 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
<!-- 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!