Video carousel

HTML

<div id="inline-gallery-container" class="inline-gallery-container"></div>

JavaScript

const lgContainer = document.getElementById('inline-gallery-container');
const inlineGallery = lightGallery(lgContainer, {
    container: lgContainer,
    dynamic: true,
    plugins: [lgVideo],
    // Turn off hash plugin in case if you are using it
    // as we don't want to change the url on slide change
    hash: false,
    // Do not allow users to close the gallery
    closable: false,
    // Add maximize icon to enlarge the gallery
    showMaximizeIcon: true,
    // Append caption inside the slide item
    // to apply some animation for the captions (Optional)
    appendSubHtmlTo: '.lg-item',
    // Delay slide transition to complete captions animations
    // before navigating to different slides (Optional)
    // You can find caption animation demo on the captions demo page
    slideDelay: 400,
    dynamicEl: [
        {
            src: 'https://youtu.be/IUN664s7N-c',
            subHtml: `<h4>'Peck Pocketed' by Kevin Herron</h4>`,
        },
        {
            src: 'https://www.youtube.com/watch?v=ttLu7ygaN6I',
            subHtml: `<h4>Second video</h4>`,
            thumb: 'https://img.youtube.com/vi/ttLu7ygaN6I/mqdefault.jpg',
        },
        {
            src: 'https://www.youtube.com/watch?v=C3vyugaBhSs',
            subHtml: `<h4>UE5</h4>`,
        },
        // Add more video objects as needed
    ],
});

// Since we are using dynamic mode, we need to programmatically open lightGallery
inlineGallery.openGallery();

import { useState } from 'react';
import { LightGallery, 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 slides: GalleryItem[] = [
    {
        src: 'https://youtu.be/IUN664s7N-c',
        poster: 'https://img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/IUN664s7N-c/mqdefault.jpg',
        alt: 'Peck Pocketed',
        captionHtml: "<h4>'Peck Pocketed' by Kevin Herron</h4>",
        lgSize: '1280-720',
    },
    {
        src: 'https://www.youtube.com/watch?v=ttLu7ygaN6I',
        poster: 'https://img.youtube.com/vi/ttLu7ygaN6I/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/ttLu7ygaN6I/mqdefault.jpg',
        alt: 'Second video',
        captionHtml: '<h4>Second video</h4>',
        lgSize: '1280-720',
    },
];

// An inline gallery is the same component mounted into your own
// element: keep it open and non-closable, and it behaves as a carousel.
// The element is kept in state, not in a ref: the gallery can only be
// rendered into it once it exists, and setting state renders again.
const [container, setContainer] = useState<HTMLElement | null>(null);

<>
    {/* The gallery is rendered inside this element and takes its size. */}
    <div className="inline-gallery-container" ref={setContainer} />
    {container && (
        <LightGallery
            container={container}
            // The carousel is always open and cannot be closed.
            open
            closable={false}
            // Toolbar button that expands it to the whole window.
            showMaximizeIcon
            slides={slides}
            plugins={[Thumbnail, Video]}
        />
    )}
</>;

<script setup>
import { ref } from 'vue';
import { LightGallery } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Video from '@lightgallery/vue/plugins/video';

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 slides = [
    {
        src: 'https://youtu.be/IUN664s7N-c',
        poster: 'https://img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/IUN664s7N-c/mqdefault.jpg',
        alt: 'Peck Pocketed',
        captionHtml: "<h4>'Peck Pocketed' by Kevin Herron</h4>",
        lgSize: '1280-720',
    },
    {
        src: 'https://www.youtube.com/watch?v=ttLu7ygaN6I',
        poster: 'https://img.youtube.com/vi/ttLu7ygaN6I/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/ttLu7ygaN6I/mqdefault.jpg',
        alt: 'Second video',
        captionHtml: '<h4>Second video</h4>',
        lgSize: '1280-720',
    },
];

// An inline gallery is the same component mounted into your own
// element: keep it open and non-closable, and it behaves as a carousel.
const container = ref(null);
</script>

<template>
    <!-- The gallery is rendered inside this element and takes its size. -->
    <div ref="container" class="inline-gallery-container" />
    <!-- The carousel cannot be closed. The maximize icon expands it to the
         whole window. -->
    <LightGallery
        v-if="container"
        :container="container"
        :open="true"
        :closable="false"
        :show-maximize-icon="true"
        :slides="slides"
        :plugins="plugins"
    />
</template>

import { Component } from '@angular/core';
import { LgGalleryComponent, 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],
    template: `
        <!-- The gallery is rendered inside this element and takes its
             size. -->
        <div #host class="inline-gallery-container"></div>
        <!-- The carousel is always open and cannot be closed. The maximize
             icon expands it to the whole window. -->
        <lg-gallery
            [container]="host"
            [open]="true"
            [closable]="false"
            [showMaximizeIcon]="true"
            [slides]="slides"
            [features]="features"
        />
    `,
})
export class Gallery {
    features = [withThumbnail(), withVideo()];

    // YouTube and Vimeo: `src` is the address of the video page. `poster`
    // is the image shown before the video plays.
    slides: LgGalleryItem[] = [
        {
            src: 'https://youtu.be/IUN664s7N-c',
            poster: 'https://img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg',
            thumb: 'https://img.youtube.com/vi/IUN664s7N-c/mqdefault.jpg',
            alt: 'Peck Pocketed',
            captionHtml: "<h4>'Peck Pocketed' by Kevin Herron</h4>",
            lgSize: '1280-720',
        },
        {
            src: 'https://www.youtube.com/watch?v=ttLu7ygaN6I',
            poster: 'https://img.youtube.com/vi/ttLu7ygaN6I/maxresdefault.jpg',
            thumb: 'https://img.youtube.com/vi/ttLu7ygaN6I/mqdefault.jpg',
            alt: 'Second video',
            captionHtml: '<h4>Second video</h4>',
            lgSize: '1280-720',
        },
    ];
}