Demos

Angular video gallery component

View as Markdown Open in Claude Open in ChatGPT

@lightgallery/angular plays YouTube, Vimeo, Wistia and self-hosted HTML5 video (MP4, WebM, Ogg) in a full-screen lightbox, from a standalone component with signal inputs and zoneless change detection. 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 Angular package docs.

Demo

Open in StackBlitz

Install

npm install @lightgallery/angular @angular/cdk 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 feature recognises it and builds the embed. poster supplies the facade image; YouTube posters are fetched for you when you leave it out.

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-video-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (video of videos; track video.src) {
                <a [lgGalleryItem]="video">
                    <img [src]="video.poster" alt="" />
                </a>
            }
        </lg-gallery>
    `,
})
export class VideoGallery {
    features = [withThumbnail(), withVideo()];

    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',
        },
    ];
}

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:

videos: 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

Video settings are arguments to the withVideo() factory:

features = [
    withThumbnail(),
    withVideo({
        // 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 withVimeoThumbnail().

SSR

Entry points import cleanly in bare Node and the overlay mounts through the CDK overlay after hydration, so Angular SSR renders your trigger markup without contacting any video provider on the server.

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

Edit this page on GitHub