Check out the WordPress Plugin of lightGallery

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 api to be included in your document for pausing the vimeo video. https://f.vimeocdn.com/js/froogaloop2.min.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(); 

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