在響應式圖像「框架」中包裹youtube視頻，使用LazyYT.js進行延遲加載

首先，這裏是我當前代碼的一個小提琴。請點擊視頻中的「播放」按鈕，查看我遇到的問題。在響應式圖像「框架」中包裹youtube視頻，使用LazyYT.js進行延遲加載

我想要做的事：

我需要將YouTube視頻在一臺筆記本電腦的形象，所以它看起來像視頻被「打」上電腦屏幕。這需要具有響應能力，所以當瀏覽器調整大小時，視頻/筆記本電腦就會正常縮放。

我還需要使用LazyYT.js，一個只加載視頻縮略圖的jQuery插件，直到用戶點擊它，然後加載整個iframe。

什麼不工作：

一旦iframe是在屏幕上我的代碼是做我想要的東西（YouTube的視頻是很好的放置在屏幕）。但是，我需要pre-iframe lazyYT縮略圖來執行相同的操作。正如你可以在小提琴中看到的，直到你點擊縮略圖（加載iframe）才能正確顯示，然後一切都很好。

問題：

我怎樣才能LazyYT.js以同樣的方式顯示縮略圖我作爲我目前顯示的iframe？

代碼：（注：使用jQuery + Zurb基金會+ SASS）：

HTML：

<div class="row"> 
    <div class="small-12 large-12 columns front-page" role="main"> 
     <div class="row content-section sneakpeek hide-for-small-only"> 
      <div class="section-title"> 
       <h2>ASC Online Sneak Peek</h2> 

      </div> 
      <!-- .section-title --> 
      <div class="row vidrow"> 
       <div class="medium-12 columns"> 
        <div class="vidwrapper"> 
         <div class="framewrapper"> 
          <div class="lazyYT" data-youtube-id="5DHYe4dhjXw">loading...</div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <!-- .row --> 
     </div> 
     <!-- .content-section --> 
    </div> 
</div>

SASS：

.front-page .content-section.sneakpeek { 

    padding: 1rem 3rem 3rem 3rem; 

    .vidrow { 
    position: relative; 
    bottom: 3rem; 
    } 

    .vidwrapper { 
    width: 100%; 
    height: 100%; 
    max-width: 1034px; 
    max-height: 543px; 
    margin: 0 auto; 

    .framewrapper { 
     position: relative; 
     padding-top: 25px; 
     padding-bottom: 67.5%; 
     height: 0; 

     .lazyYT-container { 
     background: transparent; 
     position: initial; 
     } 
     iframe { 
     box-sizing: border-box; 
     background: url('http://i.imgur.com/vq812Tr.png') center center no-repeat; 
     background-size: contain; 
     padding: 11.9% 15.5% 14.8%; 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     } 
    } 
    } 
} // .front-page .content-section.sneakpeek

JS：

jQuery('.lazyYT').lazyYT();

來源

2015-02-23 Prefix

你的小提琴只是爲我顯示一個空白的輸出頁面。 – 2015-02-26 09:00:14

對我來說，就像答案中的兩個小提琴一樣。有些東西一定是脫機的，或者同時改變了URL :) BTW +1讓我知道LazyYT :) – 2015-02-26 09:49:42

輸出被設計爲隱藏在小屏幕上 - 試着讓小提琴的輸出區域變大，你會看到內容:-) – Prefix 2015-02-27 05:39:39

您需要從IFRAME移動background，background-size，並padding性質的.vidwrapper使得這些應用即使尚未顯示視頻。請參閱this jsfiddle。

更新：這應該工作正常：http://jsfiddle.net/eyx8yvLz/1/。視頻的寬高比不適合背景，所以我必須稍微調整一下。

來源

2015-02-25 18:44:04

你沒有適合灰色容器內的縮略圖（必須留在屏幕內），它也打破了調整大小。如果你能幫我弄清楚如何解決這些問題，+代表是你的。 – Prefix 2015-02-25 21:15:43

更新版本要好得多（謝謝！）但是在視頻的底部仍然顯示出一小塊背景，當屏幕放大時，它會變得更加明顯。 – Prefix 2015-02-25 21:36:04

我不確定該怎麼做。該視頻與筆記本電腦的寬高比不匹配，並且沒有改變視頻寬高比的好方法。我建議使用具有與視頻相同高寬比的幀的不同筆記本電腦圖像。 – 2015-02-25 21:39:27

在響應式圖像「框架」中包裹youtube視頻，使用LazyYT.js進行延遲加載

回答

相關問題