Splide Video - 使用静态 HTML 时不会加载 Youtube 视频答案

【问题标题】：Splide Video - Youtube videos won't load when using static HTMLSplide Video - 使用静态 HTML 时不会加载 Youtube 视频
【发布时间】：2022-01-08 17:52:34
【问题描述】：

我在使用 splide 视频扩展时遇到问题，当我尝试将它与 youtube 一起使用时，它不会加载视频，单击播放后只会显示黑屏。我已经从文档中复制了确切的示例，并将随机小狗图片作为 img，但它不起作用。

<!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>

无法加载 youtube 视频，但 Vimeo 视频可以正常工作。我该如何解决？

编辑：提供此文件（Liveserver / Codepen / Webstorm Live view）而不是静态 HTML 时，它似乎工作正常。我不确定这是什么原因。

【问题讨论】：

标签： javascript html splidejs

【解决方案1】：

很奇怪，但我发现传递参数 video: { loop: true, } 使它运行.. 没有它就不会

以下是一个工作示例...（此处为代码笔：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>

【讨论】：