html - 将 youtube 视频包装在静态图像 "frame"中并保持响应式调整大小

Question

我有一张空白 Macbook 的下图。

图像是1034‖×‖543。

我想在屏幕的“灰色”区域内插入一个 YouTube 视频。我希望它看起来就像在笔记本电脑屏幕上播放 YouTube 视频一样。

我还希望笔记本电脑图像/youtube 视频能够缩放，以便当网页在平板电脑或移动设备 View 中时，图像和视频缩小以匹配。

我正在尝试使用 fitvid.js 来完成此操作，但运气不佳——我可以让视频适应一个静态大小，但我无法让它在调整大小时仍然完美适应, 它会变形。

下面是我当前的标记:

html:

<div class="col-sm-12">
  <div class="title">
    <h2>What's New</h2>
    <small>ASC Sneak Peak</small>
  </div>
  <div class="macbook-wrapper">
    <iframe width="715" height="402" src="//www.youtube.com/embed/**url**" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

SASS:

.macbook-wrapper{
  background: url('../img/content/home/macbook.png') no-repeat;

  .fluid-width-video-wrapper {
    width: 97.5%;
    background: #000;
  }
}

Answer 1

您可以使用填充和百分比来设置一些技巧，这样您就可以相应地缩放它。基本上，设置一个纯粹基于 % 的容器，带有一个根据容器缩放的绝对位置 iframe。

HTML

<div>
  <iframe></iframe>
</div>

CSS

div {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
}
div iframe {
    background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

您只需添加 box-sizing: border-box; 和一些 padding 即可在屏幕内定位 iframe。查看 http://jsfiddle.net/41sdho4w/

更进一步 - 这是一个带有容器的版本来帮助控制 max-width 和 max-height 而不是依赖 body/viewport http://jsfiddle.net/4g9e3ywy/