无法使用 lightGallery 播放视频

Question

在一个网络项目中，我需要使用 justifiedGallery 布局一个画廊，并使用 lightGallery 创建灯箱处理。现在，照片可以正常播放，但视频无法播放：

这里是演示问题的CodePen。

HTML：

<p>The first item is a YouTube video. But it doesn't play!</p>

<div id="gallery">
  <a data-src="//www.youtube.com/watch?v=EIUJfXk3_3w" data-poster="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg">
    <img src="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg" />
  </a>

  <a data-src="https://images.unsplash.com/photo-1605973029521-8154da591bd7?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80">
    <img src="https://images.unsplash.com/photo-1605973029521-8154da591bd7?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80" />
  </a>
  <a data-src="https://images.unsplash.com/photo-1526281216101-e55f00f0db7a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80" >
    <img src="https://images.unsplash.com/photo-1526281216101-e55f00f0db7a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80" />
  </a>
  <a data-src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" >
    <img src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80" />
  </a>
  <a data-src="https://images.unsplash.com/photo-1505820013142-f86a3439c5b2?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80" >
    <img src="https://images.unsplash.com/photo-1505820013142-f86a3439c5b2?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80" />
  </a>
  <a data-src="https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" >
    <img src="https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80" />
  </a>
</div>

js:

$("#gallery")
  .justifiedGallery({})
  .on("jg.complete", () => {
    lightGallery(document.getElementById("gallery"), {
      plugins: [lgVideo]
    });
  });

另外，我使用以下设置：

<head>

的东西：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"></script>

外部样式表（按以下顺序加载）：

外部脚本（按以下顺序加载）：

有人可以帮我让视频正常工作吗？

Answer 1

您的第一个 A 标签包含一个

<img>

，但 Youtube 的播放器（代码）嵌入仅适用于

<iframe>

内。

看看下面提出的想法是否可以解决您的问题...

更换第一个 A 标签：

  <a data-src="//www.youtube.com/watch?v=EIUJfXk3_3w" data-poster="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg">
    <img src="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg" />
  </a>

有了这个新版本：

  <a data-src="https://www.youtube.com/embed/EIUJfXk3_3w" data-poster="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg">
    <iframe width="500" height="300" src="https://www.youtube.com/embed/EIUJfXk3_3w"> </iframe>
  </a>

无法使用 lightGallery 播放视频

问题描述投票：0回答：1

1个回答

最新问题

无法使用 lightGallery 播放视频

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1