lightGallery: Videos

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

Youtube, Vimeo Video Gallery

Plugin dependency

API dependency

HTML structure

Javascript

Video Gallery Without Poster

HTML structure

Javascript

Video Player Parameters

Javascript

Automatically load thumbnails

Plugin dependency

Javascript

More demos