Splidejs video not showing

user_1145731 0
Viewed 1325

I am using splidejs to load video into slides. The video extension is being loaded, however no video is being rendered. I have been over this and I can see any issue with the code.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@latest/dist/css/splide-extension-video.min.css">
<script src="//cdn.jsdelivr.net/npm/@splidejs/splide@2.4.14/dist/js/splide.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.4.6/dist/js/splide-extension-video.min.js"></script>

<div id="primary-slider" class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU"></li>
            <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU"></li>
            <li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU"></li>
       </ul>
   </div>
</div>

<script>
document.addEventListener( 'DOMContentLoaded', function () {
    var splide = new Splide( '#primary-slider', {
        video: {
            autoplay: true,
            mute    : true,
        },
    });
    splide.mount();
}); 
</script>
slider video javascript
2 Answers

You need to change only one line in order to get it work:

splide.mount();

to

splide.mount({Video});

or

splide.mount(window.splide.Extensions);

It depends in which way you included Splide CSS/JS files.

More: https://splidejs.com/extension-video/

user_17228510

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

vs

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

You should use the load event listener

document.addEventListener( 'load', function () {
    var splide = new Splide( '#primary-slider', {
        video: {
            autoplay: true,
            mute    : true,
        },
    });
    splide.mount();
});
user_45813360
Related