featherlight.js的问题

Question

我正在用Vimeo的视频制作一个视频画廊。该图库有缩略图，当点击时，视频将在模式窗口中以iframe形式打开。

我已经为此下载了featherlight.js插件，它在某种程度上是有效的，但我有一些问题。首先，视频很小。它看起来不像Vimeo视频，只是看起来很奇怪。我基本上只想让它看起来像featherlight主页上的iframe示例，有人能告诉我怎么做吗？或者有人知道哪里有关于如何使用这个插件的更详细的说明？

jsfiddle：https://jsfiddle.net/ajbates/9dgr4nmc/

<div class="image-container">
          <div class="thumb">
            <a href="https://player.vimeo.com/video/162985476?autoplay=1&color=ffae00&byline=0&portrait=0" width="900" height="506" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen data-featherlight="iframe">
              <img src="img/butlins.png" alt="Bloc Festival">
              <div class="photo-overlay">
                <h3>Dancing On Carpets</h3>
                <p>Documentary Trailer</p>
              </div>
            </a>
            </div>
          </div>

Answer 1

首先你有一个错误的链接来显示你的视频从vimeo，右边将是https://player.vimeo.com/video/162985476，在那里你会看到所有的按钮。

其次，通过js或html with script标签进行应用：

$.featherlight({iframe: 'https://player.vimeo.com/video/162985476', iframeWidth: 500, 
iframeHeight: 300});

第二个工作人员是在网页内做(这是如何在脚本的主网站上做的)：

<a href="#" data-featherlight="#fl3">iFrame</a>
<iframe class="lightbox" src="https://player.vimeo.com/video/162985476" id="fl3" style="border:none;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" height="500px" width="900px"></iframe>

和CSS：

.lightbox {
display: none;

}

您还可以在ligthbox中放置宽度/高度设置，而不是html。