I am having a problem with splide video extension, when I am trying to use it with youtube it doesn't load the video, just shows a black screen once I click play. I've copied the exact example from the docs and put random puppy pictures as img but it doesn't work.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.9/dist/css/splide.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.6.4/dist/css/splide-extension-video.min.css">
<title>Splide Video</title>
</head>
<body>
<div 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">
<img src="https://cf.ltkcdn.net/dogs/images/orig/235430-2000x1332-australian-shepherd-puppy.jpg">
</li>
<li class="splide__slide" data-splide-vimeo="https://vimeo.com/215334213">
<img src="https://www.rd.com/wp-content/uploads/2021/03/GettyImages-1133605325-scaled-e1617227898456.jpg">
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.9/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.6.4/dist/js/splide-extension-video.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const splide = new Splide('.splide');
splide.mount(window.splide.Extensions);
});
</script>
</body>
</html>
The youtube video won't load, but the Vimeo video works fine. How can I fix it?
Edit: When serving this file (Liveserver / Codepen / Webstorm Live view) and not just as static HTML it seem to be working fine. I am not sure what's the reason for that.
Weird but I found that passing the argument video: { loop: true, } makes it run.. without that it wouldn't
Below is a working example... (codepen here: https://codepen.io/alxfmi/pen/poddQMB)
document.addEventListener("DOMContentLoaded", function() {
new Splide('.splide', {
heightRatio: 0.5625,
cover: true,
updateOnMove: true,
pagination: false,
padding: {
left: 0,
right: '22.5%'
},
arrows: true,
width: '100%',
wheel: true,
gap: '1rem',
video: {
loop: true,
},
}).mount(window.splide.Extensions);
});<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.12/dist/css/splide.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.6.8/dist/css/splide-extension-video.min.css" rel="stylesheet" />
<div 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">
<img src="https://img.youtube.com/vi/cdz__ojQOuU/hqdefault.jpg">
</li>
<li class="splide__slide">
<img src="https://img.youtube.com/vi/3GNQL3alB-Y/hqdefault.jpg">
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.12/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.6.8/dist/js/splide-extension-video.min.js"></script>