带有Fancybox 3的Plyr.js，多个视频未初始化

Question

我正试图在同一个页面上实现多个视频，这些视频都是在光照盒中打开的。我目前正在使用Plyr.js，因为它可以使html5、vimeo和youtube视频看起来都一样。我也使用Fancybox作为灯箱。

当我添加一个视频时，一切似乎都正常。然而，多个视频似乎没有初始化在照明盒。我还注意到，如果我有一个youtube视频，并把它放在列表的第一位，它可以工作，但如果它跟随另一个视频，它将不会初始化。

我使用的是类.player，而不是id，因为我有多个实例。

我知道这是一个灯箱问题，因为如果我移除电灯盒，所有的视频都能正常工作。因此，我可能需要以某种方式调整lightbox初始化Plyr.js的方式

这是我的代码：

示例

<div class="container">
  <p><a href="#video1" data-fancybox>HTML5 Video</a></p>
  <div id="video1" class="lightbox">
    <video controls crossorigin playsinline class="player">
    <!-- Video files -->
      <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4">
    </video>
  </div>
  <p><a href="#video2" data-fancybox>Youtube Video</a></p>
  <div id="video2" class="lightbox">
    <div class="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
  </div>
  <p><a href="#video3" data-fancybox>HTML5 Video</a></p>
  <div id="video3" class="lightbox">
    <video controls crossorigin playsinline class="player">
    <!-- Video files -->
      <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4">
    </video>
  </div>

</div>

示例JS:

$("[data-fancybox]").fancybox({
  beforeShow: function() {
    const player = new Plyr('.player', {});
  }
});

示例CSS

.container {
  width: 600px;
  margin: 0 auto;
}

.lightbox {
  display: none;
  width: 600px;
}

.fancybox-content {
  padding: 0;
}

Answer 1

我知道这是个灯箱问题

如果它运行得非常好，它怎么可能是灯箱问题？我重复一遍-很好！

多个视频似乎没有在光照盒中初始化

再一次错误的假设。如果要检查#video2元素，就会发现它是空的。为什么？我不是Plyr专家，但也许它不会初始化为隐藏元素。尝试将beforeShow更改为afterShow回调- https://codepen.io/anon/pen/xQMmRV