featherlight.jsの問題

Question

私はVimeoのビデオでビデオギャラリーを作っています。ギャラリーにはサムネイルがあり、クリックすると動画がモーダルウィンドウのiframeで開きます。

このためにfeatherlight.jsプラグインをダウンロードしました。これはうまく機能していますが、いくつか問題があります。まず、ビデオは小さいです。そして、それはVimeoのビデオのようには見えないが、ちょうど非常に奇妙に見える。私は基本的には、featherlightのホームページ上のiframeの例のように見せたいのですが、これを行う方法を教えてもらえますか？または、誰もがこのプラグインの使い方に関する詳細な指示がある場所を知っていますか？

jsfiddle：あなたはVimeoのからあなたのビデオを表示するために、間違ったリンクを持っている 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

まず、右はあなたがすべてのボタンが表示されますhttps://player.vimeo.com/video/162985476になります。

第二に、スクリプトタグでJSやHTMLを通じて適用されます。

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

二スタッフはWebページ内でそれを行うことです（これは、それがスクリプトのメインウェブサイト上で行われている方法です）：

<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の代わりにwidth/height設定を入れることができます。