lightGallery version 2 has been released. Please upgrade

# Html5 Video Gallery

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.

#### Browser support

Please note: IE 8 and bellow does not support html5 videos. see browser support

Your browser does not support HTML5 video.
Your browser does not support HTML5 video.
Your browser does not support HTML5 video.
Your browser does not support HTML5 video.

#### 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();

## 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!

Your browser does not support HTML5 video.
Your browser does not support HTML5 video.
Your browser does not support HTML5 video.
Your browser does not support HTML5 video.

#### 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

    $('#video-gallery').lightGallery({
        videojs: true
    });

## More demos

Thumbnails
Youtube/Vimeo Videos
HTML5 Videos
Transitions
Dynamic
Events
Methods
Iframe
Captions
Responsive
fixed Size
Html Markup
Comment box
Easing
Hash plugin
Share