将 youtube 视频包裹在响应图像 "frame" 中，使用 LazyYT.js 进行延迟加载

Question

首先这是我当前代码的 fiddle。请点击视频上的 "play" 按钮查看我遇到的问题。

我想做什么：

我需要将 YouTube 视频放在笔记本电脑的图像上，这样视频看起来就像 "playing" 在笔记本电脑屏幕上。这需要响应，因此在调整浏览器大小时，video/laptop 会正确缩放。

我还需要使用 LazyYT.js，一个 jQuery 插件，它只加载视频的缩略图，直到用户点击它，然后加载整个 iframe。

什么不起作用：

一旦 iframe 出现在屏幕上，我的代码就会执行我想要的操作（youtube 视频很好地放置在屏幕上）。但是，我需要前置 iframe lazyYT 缩略图来做同样的事情。正如您在 fiddle 中看到的那样，在您单击缩略图（加载 iframe）之前它不会正确显示，然后一切正常。

问题：

如何让 LazyYT.js 以与当前显示 iframe 相同的方式显示我的缩略图？

代码：（注意：使用jQuery + Zurb Foundation + 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();

Answer 1

您需要将 background、background-size 和 padding 属性从 iframe 移动到 .vidwrapper，这样即使视频尚未显示，这些属性也适用。参见 this jsfiddle。

更新：这应该可以正常工作：http://jsfiddle.net/eyx8yvLz/1/。视频的宽高比不适合背景，所以我不得不稍微调整一下。

将 youtube 视频包裹在响应图像 "frame" 中，使用 LazyYT.js 进行延迟加载

wrap youtube video inside responsive image "frame", using LazyYT.js for lazy-loading

css

youtube

iframe

jquery

responsive-design