lightGallery: Videos

lightGallery supports youtube, vimeo, and all types of HTML5 video formats like MP4, WebM, Ogg ..

For displaying youtube or vimeo video just paste the video URL or share URL which is provided by youtube / vimeo in the data-src attribute. Same like how 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 improves the performance and maintain the flexibility of your gallery without effecting user experience. Videos will be loaded when user click 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 or vimeo. You can specify the size of thumbnails in the settings. Videos will be automatically paused when user start 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=SF2s7BKa2Ww" 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=SF2s7BKa2Ww" >
      <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: 'navbar-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