Video Gallery
Huro is integrated with LightgalleryJs, a performant vanilla javascript lightbox library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following example shows you how it works with youtube videos. Works also with Vimeo.
//JS CODE
lightGallery(document.getElementById('videogallery'));
//MARKUP
<div id="videogallery" class="light-gallery-wrap">
<a href="https://www.youtube.com/watch?v=4vtL0Tq13E8" data-poster="https://via.placeholder.com/800x600">
<img src="https://via.placeholder.com/800x600" alt="">
</a>
<a href="https://www.youtube.com/watch?v=Ke90Tje7VS0" data-poster="https://via.placeholder.com/800x600">
<img src="https://via.placeholder.com/800x600" alt="">
</a>
<a href="https://www.youtube.com/watch?v=nhBVL41-_Cw" data-poster="https://via.placeholder.com/800x600">
<img src="https://via.placeholder.com/800x600" alt="">
</a>
<a href="https://www.youtube.com/watch?v=H0wHx_ID_vo&t=269s" data-poster="https://via.placeholder.com/800x600">
<img src="https://via.placeholder.com/800x600" alt="">
</a>
<a href="https://www.youtube.com/watch?v=Ttf3CEsEwMQ" data-poster="https://via.placeholder.com/800x600">
<img src="https://via.placeholder.com/800x600" alt="">
</a>
<a href="https://www.youtube.com/watch?v=roywYSEPSvc" data-poster="https://via.placeholder.com/800x600">
<img src="https://via.placeholder.com/800x600" alt="">
</a>
<a href="https://www.youtube.com/watch?v=0PA69L88HeI" data-poster="https://via.placeholder.com/800x600">
<img src="https://via.placeholder.com/800x600" alt="">
</a>
<a href="https://www.youtube.com/watch?v=3Vl8a3zYjiw" data-poster="https://via.placeholder.com/800x600">
<img src="https://via.placeholder.com/800x600" alt="">
</a>
<a href="https://www.youtube.com/watch?v=VjXb3PRL9WI" data-poster="https://via.placeholder.com/800x600">
<img src="https://via.placeholder.com/800x600" alt="">
</a>
</div>
