使用lightGallery时视频无法播放的问题求助

在Web项目中，我使用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>

JavaScript代码 #

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

外部资源加载顺序 #

样式表 #

• lightGallery核心样式文件
• lightGallery视频插件样式文件
• justifiedGallery样式文件

脚本文件 #

• jQuery库
• lightGallery核心脚本文件
• lightGallery视频插件脚本文件
• justifiedGallery脚本文件

请帮忙解决视频无法正常播放的问题。

注：图片与可播放视频混合的用法在lightGallery官方文档的混合内容板块中有相关说明：

内容的提问来源于stack exchange，提问作者Atom