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="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
<!-- 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 size -->
<a href="link-to-youtube/vimeo-video" class="cs-video-btn"></a>
<!-- Small button size -->
<a href="link-to-youtube/vimeo-video" class="cs-video-btn cs-video-btn-sm"></a>// Default button size
a(href="link-to-youtube/vimeo-video").cs-video-btn
// Small button size
a(href="link-to-youtube/vimeo-video").cs-video-btn.cs-video-btn-sm
On top of the image
<!-- 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!