lightSlider and lightGallery with Video and Images

[semaf]

After testing a lot of different ways there are some points to be fixed.

• HTML5 video size does not fit to Image size. Video needs to be responsive. I set the

• HTML5 video will not autoplay in Chrome, Firefox and Opera. Safari is working

• If the Gallery is opened, than it changes the SubURL's from http://domain.com/event/ to http://domain.com/#lg=1&slide=0 . Correct would be http://domain.com/event/#lg=1&slide=0 or http://domain.com/this-is-an-url#lg=1&slide=0

My Javascript Code:

$('#imageGallery').lightSlider({
        gallery:true,
        item:1,
        loop:false,
        thumbItem:6,
        prevHtml: '<i class="fa fa-angle-left fa-4x"></i>',
        nextHtml: '<i class="fa fa-angle-right fa-4x"></i>',
        slideMargin:10,
        enableDrag: false,
        currentPagerPosition:'left',
        videojs: true,
        onSliderLoad: function(el) {
            el.lightGallery({
                selector: '#imageGallery .lslide',
                download: false,
                showAfterLoad: true,
                autoplay: false,
                share: false,
                thumbnail: false,
                fullScreen: false,
                pager: false,
                zoom: false
            });
        }
    });

And my HTML Code

<div style="display:none;" id="video1">
    <video id="video_player" class="lg-video-object lg-html5" playsinline muted loop autoplay poster="{$PFAD_MEDIAFILES}videos/3449.jpg">
        <source src="{$PFAD_MEDIAFILES}{$oMedienDatei->cPfad}" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

<ul id="imageGallery" class="imagesGallery">
    <li data-thumb="{$PFAD_MEDIAFILES}videos/3449.jpg" data-html="#video1">
        <video id="video_player" class="lg-video-object lg-html5" playsinline muted loop autoplay style="width:100%!important;height: auto!important; border-radius: 4px;">
            <source src="{$PFAD_MEDIAFILES}{$oMedienDatei->cPfad}" type="video/mp4">
        </video>
    </li>
    <li data-thumb="//domain.com/{$oBild->cPfadMini}" data-src="//domain.com/{$oBild->cPfadGross}">
        <img src="//domain.com/{$oBild->cPfadNormal}" alt="{$Artikel->cName}" class="img-responsive" alt="{$Artikel->cName}" itemprop="image" />
    </li>
</ul>

[ronakrathod18]

@sachinchoolur - does lightslider work with the brightcove video player?

[semaf]

@ronakrathod18 ??

[johanvdr]

Are there any updates on this issue?