Demos

Vue video gallery component

View as Markdown Open in Claude Open in ChatGPT

@lightgallery/vue plays YouTube, Vimeo, Wistia and self-hosted HTML5 video (MP4, WebM, Ogg) in a full-screen lightbox, driven by v-model and typed emits. Provider slides render as poster facades, so no third-party iframe, script or cookie loads until the viewer presses play. The full component API is in the Vue package docs.

Demo

Open in StackBlitz

Install

npm install @lightgallery/vue lightgallery

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-video.css';

Provider videos

Point a slide’s src at a YouTube, Vimeo or Wistia URL, the Video plugin recognises it and builds the embed. poster supplies the facade image; YouTube posters are fetched for you when you leave it out.

<script setup lang="ts">
import { LightGallery, LgItem, type LgGalleryItem } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Video from '@lightgallery/vue/plugins/video';

const videos: LgGalleryItem[] = [
    {
        src: 'https://youtu.be/IUN664s7N-c',
        caption: 'Peck Pocketed by Kevin Herron',
    },
    {
        src: 'https://vimeo.com/112836958',
        poster: 'img/vimeo-poster.jpg',
        caption: 'Nature',
    },
];
</script>

<template>
    <LightGallery :plugins="[Thumbnail, Video]">
        <LgItem v-for="video of videos" :key="video.src" :item="video">
            <img :src="video.poster ?? 'img/youtube-thumb.jpg'" alt="" />
        </LgItem>
    </LightGallery>
</template>

HTML5 videos

Self-hosted video takes a video object with the sources, tracks and the attributes for the <video> element. Leave src off for these slides:

const items: LgGalleryItem[] = [
    {
        video: {
            source: [{ src: 'videos/video1.mp4', type: 'video/mp4' }],
            tracks: [
                {
                    src: 'videos/captions-en.vtt',
                    kind: 'captions',
                    srclang: 'en',
                    label: 'English',
                    default: 'true',
                },
            ],
            attributes: { preload: false, controls: true },
        },
        poster: 'img/html5-video-poster.jpg',
        caption: 'Peck Pocketed',
    },
];

Facades and playback settings

Every Video plugin setting lives on the :video prop:

<LightGallery
    :slides="videos"
    :plugins="[Thumbnail, Video]"
    :video="{
        // both are the defaults
        videoFacade: true,
        youTubeNoCookie: true,
        // autoplay forces an immediate embed by design, turn it off
        // to keep the facade on the first slide too
        autoplayFirstVideo: false,
        gotoNextSlideOnVideoEnd: true,
    }"
/>

Facades cut roughly 990 KB and 14 requests per YouTube slide until playback starts, the poster chain is described in the video facades guide. Vimeo thumbnails need the vimeoThumbnail plugin.

Nuxt and SSR

The overlay never server-renders (the <Teleport> mounts client-side), so the component works directly in server-rendered pages with no <ClientOnly> wrapper, and no video provider is contacted on the server.

More in the Vue package docs, or see the Vue image gallery demo.

Edit this page on GitHub