Demos

Bootstrap video gallery with lightbox

View as Markdown Open in Claude Open in ChatGPT

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 Bootstrap.

Demo

Open in StackBlitz
Open in StackBlitz
Open in StackBlitz
Open in StackBlitz

HTML

<div class="container">
    <div class="row mx-0" id="bootstrap-video-gallery">
        <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],
});
import {
    LightGallery,
    LightGalleryItem,
    type GalleryItem,
} from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Video from '@lightgallery/react/plugins/video';

// YouTube and Vimeo: `src` is the address of the video page. `poster`
// is the image shown before the video plays.
const items: GalleryItem[] = [
    {
        src: 'https://www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        alt: 'YouTube video',
        lgSize: '1280-720',
    },
    {
        src: 'https://vimeo.com/112836958',
        poster: 'https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg',
        thumb: 'https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg',
        alt: 'Vimeo video',
        lgSize: '1280-720',
    },
];

// The thumbnail plugin is optional
<LightGallery plugins={[Thumbnail, Video]}>
    <div className="row g-3">
        {items.map((item) => (
            <LightGalleryItem
                key={item.poster}
                item={item}
                className="col-sm-4"
            >
                <img className="img-fluid" src={item.thumb} alt={item.alt} />
            </LightGalleryItem>
        ))}
    </div>
</LightGallery>;
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Video from '@lightgallery/vue/plugins/video';

// The thumbnail plugin is optional
const plugins = [Thumbnail, Video];

// YouTube and Vimeo: `src` is the address of the video page. `poster`
// is the image shown before the video plays.
const items = [
    {
        src: 'https://www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        alt: 'YouTube video',
        lgSize: '1280-720',
    },
    {
        src: 'https://vimeo.com/112836958',
        poster: 'https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg',
        thumb: 'https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg',
        alt: 'Vimeo video',
        lgSize: '1280-720',
    },
];
</script>

<template>
    <LightGallery :plugins="plugins">
        <div class="row g-3">
            <LgItem
                v-for="item of items"
                :key="item.poster"
                :item="item"
                class="col-sm-4"
            >
                <img class="img-fluid" :src="item.thumb" :alt="item.alt" />
            </LgItem>
        </div>
    </LightGallery>
</template>
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withVideo } from '@lightgallery/angular/plugins/video';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            <div class="row g-3">
                @for (item of items; track item.poster) {
                    <a class="col-sm-4" [lgGalleryItem]="item">
                        <img class="img-fluid" [src]="item.thumb" [alt]="item.alt" />
                    </a>
                }
            </div>
        </lg-gallery>
    `,
})
export class Gallery {
    // The thumbnail feature is optional
    features = [withThumbnail(), withVideo()];

    // YouTube and Vimeo: `src` is the address of the video page. `poster`
    // is the image shown before the video plays.
    items: LgGalleryItem[] = [
        {
            src: 'https://www.youtube.com/watch?v=EIUJfXk3_3w',
            poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
            thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
            alt: 'YouTube video',
            lgSize: '1280-720',
        },
        {
            src: 'https://vimeo.com/112836958',
            poster: 'https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg',
            thumb: 'https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg',
            alt: 'Vimeo video',
            lgSize: '1280-720',
        },
    ];
}

Edit this page on GitHub