0

我正在制作一个包含 Vimeo 视频的视频库。画廊有缩略图，想法是当点击视频时，视频将在模态窗口的 iframe 中打开。

我已经为此下载了 featherlight.js 插件，它有点工作，但我遇到了一些问题。首先，视频很小。而且它看起来不像 Vimeo 视频，只是看起来很奇怪。我基本上只是希望它看起来像羽毛灯主页上的 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>
4

1 回答 1

1

首先，您从 vimeo 显示视频的链接错误，右边是https://player.vimeo.com/video/162985476，您将在其中看到所有按钮。

二、通过带有script标签的js或者html申请：

$.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;

}

您也可以将宽度/高度设置而不是 html 放入 ligthbox。

于 2016-08-25T09:07:31.090 回答