Html5 Video Gallery
lightGallery supports all types of HTML5 video formats like MP4, WebM, Ogg ..
for displaying html5 video create your video content using html5 video tag inside a hidden div and just add id or class name of the object(hidden div) which contain 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.
Browser support
Please note: IE 8 and bellow does not support html5 videos. see browser support
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
$('#html5-videos').lightGallery();