Tengo un problema con la extensión de video Splide, cuando trato de usarla con YouTube, no carga el video, solo muestra una pantalla negra una vez que hago clic en reproducir. Copié el ejemplo exacto de los documentos y puse imágenes aleatorias de cachorros como img pero no funciona.
<!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>El video de YouTube no se carga, pero el video de Vimeo funciona bien. ¿Cómo puedo arreglarlo?
Editar: cuando se sirve este archivo (Liveserver/Copen/Webstorm Live view) y no solo como HTML estático, parece funcionar bien. No estoy seguro de cuál es la razón de eso.
Extraño, pero descubrí que pasar el argumento video: { loop: true, } lo hace funcionar... sin eso no funcionaría
A continuación se muestra un ejemplo de trabajo... (codepen aquí: 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>