lightGallery version 2 has been released. Please upgrade

# Youtube, Vimeo Video Gallery

Lightgallery supports YouTube, Vimeo, VK and all other types of HTML5 video formats. Such as MP4, WebM, Ogg, etc.

To display YouTube, Vimeo or VK video, you can paste the video URL, or share URL, which is provided by YouTube / vimeo in the data-src attribute. The same way you display images in the gallery. Lightgallery will check the data-src attribute and if it is YouTube or vimeo video URL, it will create the video slide.

You can even provide poster image for each videos. Poster images will be loaded instead of videos. So user will be able to navigate to other slides by using mouse drag or swipe. Poster images improve performance, and maintain the flexibility of your gallery without effecting user experience. Videos will be loaded when a user clicks on the poster images. You can place poster image url in the data-poster attribute.

Lightgallery allows you to load thumbnail images automatically from YouTube, Vimeo or VK. You can specify the size of the thumbnails in the settings. Videos will be automatically paused when a user starts to navigate to another slide. So user never have to worry about it. lightGallery takes care of everything!

#### Plugin dependency

Lightgallery require the video plugin to be included in your document.

#### API dependency

Lightgallery require vimeo player.js to be included in the document for pausing the vimeo video. (optional)
If you are using the video plugin version <= 1.3.x, you need to include froogaloop2 instead of player.js

#### HTML structure

    <div id="video-gallery">
      <a href="https://www.youtube.com/watch?v=meBbDqAXago" data-poster="video-poster1.jpg" >
          <img src="img/thumb1.jpg" />
      </a>
      <a href="https://vimeo.com/1084537" data-poster="video-poster2.jpg">
          <img src="img/thumb2.jpg" />
      </a>
      ...
    </div>

#### Javascript

    $('#video-gallery').lightGallery();

## Video Gallery Without Poster

#### HTML structure

    <div id="video-gallery">
      <a href="https://www.youtube.com/watch?v=meBbDqAXago" >
          <img src="img/thumb1.jpg" />
      </a>
      <a href="https://vimeo.com/1084537" >
          <img src="img/thumb2.jpg" />
      </a>
      ...
    </div>

#### Javascript

    $('#video-gallery').lightGallery();

## Video Player Parameters

It is easy to change video player appearance with lightgallery. For youtube videos you can refer the official youtube documentation here. For vimeo videos please refer the official vimeo documentation here.

#### Javascript

    $('#video-player-param').lightGallery({
        youtubePlayerParams: {
            modestbranding: 1,
            showinfo: 0,
            rel: 0,
            controls: 0
        },
        vimeoPlayerParams: {
            byline : 0,
            portrait : 0,
            color : 'A90707'
        }
    });

## Automatically load thumbnails

You can automatically load thumbnails for youtube/vimeo videos with the help of lightgallery thumbnail plugin. You can easily specify the size of the thumbnail by passing thumbnail size via `youtubeThumbSize`/`vimeoThumbSize` settings. Here is the full list of available thumbnails.

#### Plugin dependency

Lightgallery require the lg-thubnail plugin to be included in your document for displaying thumbnails.

#### Javascript

    $('#video-thumbnails').lightGallery({
        loadYoutubeThumbnail: true,
        youtubeThumbSize: 'default',
        loadVimeoThumbnail: true,
        vimeoThumbSize: 'thumbnail_medium',
    });

## More demos

Thumbnails
Youtube/Vimeo Videos
HTML5 Videos
Transitions
Dynamic
Events
Methods
Iframe
Captions
Responsive
fixed Size
Html Markup
Comment box
Easing
Hash plugin
Share