Create a single slide show of images and HTML5 videos using lightGallery

Question

I am trying to create a mixed slider of images and HTML5 videos using lightgallery.js.

Images are shown in slider while video does not play. It gives this error:

Oops..fail to load content

Below are the CSS and JS files included in my project.

Anyone please suggest me whether I am missing any JS or CSS files or the way of creating a slideshow is not correct.

JS part:

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lg-autoplay.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lg-fullscreen.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lg-thumbnail.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lg-video.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lightgallery.min.css"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/plugins/autoplay/lg-autoplay.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/plugins/fullscreen/lg-fullscreen.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/plugins/video/lg-video.min.js" ></script>

<script>
    lightGallery(document.getElementById('slideShow'), {
        selector: '.item',
    }); 
</script>

HTML part:

<div id="slideShow">
    <div class="item" data-src="../webroot/1.jpg">
        <img src="../webroot/1.jpg" />
    </div>
    <div class="item" data-src="../webroot/2.jpg">
        <img src="../webroot/2.jpg" />
    </div>
    <div class="item" data-src="../webroot/3.jpg">
        <img src="../webroot/3.jpg" />
    </div>
    <div class="item">
        <a
            data-lg-size="1280-720"
            data-video='{
                "source": [{"src":"../webroot/1.mp4", "type":"video/mp4"}],
                "attributes": {"preload": false, "controls": true}
            }'
            data-poster="../webroot/1.jpg">
            <img
                width="300"
                height="100"
                class="img-responsive"
                src="../webroot/1.jpg"
            />
        </a>
    </div>
</div>

Answer 1

I assume, the different nesting depths might cause the problem.
If you check the official Mixed Contents docs, the code should looks like this:

HTML structure:

<div id="gallery-mixed-content-demo">
    <!-- Image -->    
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>

    <!-- HTML5 Video --->
    <a
        data-lg-size="1280-720"
        data-video='{"source": [{"src":"/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
        data-poster="/images/demo/html5-video-poster.jpg"
        data-sub-html="<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/html5-video-poster.jpg"
        />
    </a>
</div>

JavaScript:

lightGallery(document.getElementById('gallery-mixed-content-demo'));

So in your case, the video part should be like:

<div class="item"
     data-lg-size="1280-720"
     data-video='{
        "source": [{"src":"../webroot/1.mp4", "type":"video/mp4"}],
        "attributes": {"preload": false, "controls": true}
     }'
     data-poster="../webroot/1.jpg"
>
    <img width="300"
         height="100"
         class="img-responsive"
         src="../webroot/1.jpg"
    />
</div>

(Without the <a> in between)

UPDATE

Furthermore, you are including multiple lightGallery plugins without activating them like so:

lightGallery(document.getElementById('lightgallery'), {
    plugins: [lgZoom, lgThumbnail],
    ... other settings
});