lightGallery: Html5 videos

lightGallery supports all types of HTML5 video formats. Such as MP4, WebM, Ogg, etc.

To display html5 video create your video content using html5 video tag inside a hidden div. Then just add id or class name of the object(hidden div) which contains your html, inside the data-html attribute. data-src should not be provided when you use html5 videos . You can even provide video html directly inside data-html attribute. lightGallery will automatically check your content, and if it is id or class name of your hidden div content will be fetched from the div, and will be displayed as video. Otherwise direct content will be used for displaying the videos.

Plugin dependency

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

Class lg-video-object and lg-html5 needs to be added with your video tag

You can prevent preloading of video by setting preload="none"

HTML structure

<!-- Hidden video div -->
<div style="display:none;" id="video1">
    <video class="lg-video-object lg-html5" controls preload="none">
        <source src="videos/video1.mp4" type="video/mp4">
         Your browser does not support HTML5 video.
    </video>
</div>
<div style="display:none;" id="video2">
    <video class="lg-video-object lg-html5" controls preload="none">
        <source src="videos/video2.mp4" type="video/mp4">
         Your browser does not support HTML5 video.
    </video>
</div>

<!-- data-src should not be provided when you use html5 videos -->
<ul id="html5-videos">
  <li data-poster="video-poster1.jpg" data-sub-html="video caption1" data-html="#video1" >
      <img src="img/thumb1.jpg" />
  </li>
  <li data-poster="video-poster2.jpg" data-sub-html="video caption2" data-html="#video2" >
      <img src="img/thumb2.jpg" />
  </li>
  ...
</ul>

Javascript

lightGallery(document.getElementById('html5-videos'));

Html5 video gallery with videojs

It is easy to integrate videojs with lightgallery. Setup your video tag according to the videojs documentation and pass videojs : true via lightgallery options. You are done!

Include Videojs CSS and Javascript files

<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>

HTML structure

<!-- Hidden video div -->
<div style="display:none;" id="video1">
    <video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none">
        <source src="videos/video1.mp4" type="video/mp4">
         Your browser does not support HTML5 video.
    </video>
</div>
<div style="display:none;" id="video2">
    <video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none">
        <source src="videos/video2.mp4" type="video/mp4">
         Your browser does not support HTML5 video.
    </video>
</div>

<!-- data-src should not be provided when you use html5 videos -->
<ul id="video-gallery">
  <li data-poster="video-poster1.jpg" data-sub-html="video caption1" data-html="#video1" >
      <img src="img/thumb1.jpg" />
  </li>
  <li data-poster="video-poster2.jpg" data-sub-html="video caption2" data-html="#video2" >
      <img src="img/thumb2.jpg" />
  </li>
  ...
</ul>

Javascript

lightGallery(document.getElementById('video-gallery'), {
    videojs: true
});

Html5 Video Gallery

Plugin dependency

HTML structure

Javascript

Html5 video gallery with videojs

Include Videojs CSS and Javascript files

HTML structure

Javascript

More demos