Bootstrap video gallery

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Bootstrap can be used for creating beautiful video galleries with thumbnails. Here is the demo of adding lightbox gallery support for the Bootstrap.

Demo

HTML Structure 
<div class="container">
    <div class="row mx-0" id="{{$id}}">
        <a
            class="col-md-6 col-sm-6 px-0"
            data-lg-size="1280-720"
            data-src="//www.youtube.com/watch?v=EIUJfXk3_3w"
            data-poster="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg"
            data-sub-html="..."
        >
            <img
                class="img-fluid"
                src="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg"
            />
        </a>
        <a
            class="col-md-6 col-sm-6 px-0"
            data-lg-size="1280-720"
            data-src="//vimeo.com/112836958"
            data-poster="..."
            data-sub-html="..."
        >
            <img class="img-fluid" src="..." />
        </a>
    </div>
</div>
JavaScript 
window.lightGallery(document.getElementById('bootstrap-video-gallery'), {
    // Optional thumbnail plugin
    plugins: [lgThumbnail, lgVideo],
});

Edit this page on GitHub

← SwiperJs demo
Flickity carousel demo →