“电视”背景容器内的响应式 youtube 视频？

Question

我有一个电视屏幕的“容器”图像，我想在图像容器中“嵌入”一个 youtube 视频，这样看起来就好像视频正在电视屏幕上播放一样。我不知道这到底叫什么，因为我的搜索结果很少。基本上我希望视频随容器调整大小并始终完全适合它。我无法确定这是否会更好地使用 javascript 或 CSS 来完成 - 是否有任何好的插件来完成这类事情？

我当前的代码：

  <style>
    .macbook-wrapper{
      background: url('../img/content/home/macbook.png') no-repeat;
      max-width: 1034px;
      max-height: 543px;
    }
  </style>
  <center>
    <div class="macbook-wrapper">
      <iframe width="1034" height="543" src="//www.youtube.com/embed/**removed**" frameborder="0" allowfullscreen></iframe>
    </div>
  </center>

---

我已将容器的最大宽度和高度设置为 macbook 屏幕图像的尺寸。使用fitvid.js youtube iframe 匹配包装器的大小，但是我看不到背景图像。如何缩小 youtube 视频以使其恰好适合背景图像屏幕？

Answer 1

我不知道您是否使用 jQuery，但请查看 Fitvids.js (http://fitvidsjs.com/)。我几乎在所有响应式项目中都使用过它，而且效果非常好。

更新 我在http://codepen.io/micahmills/pen/kxdfI 上设置了一个关于 Code pen 的工作演示。我没有macbook的透明PNG，但你明白了。代码是：

HTML

      <iframe width="854" height="510" src="//www.youtube.com/embed/Rio16skrp2w?modestbranding=1&autohide=1&showinfo=0&controls=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
   </div>

CSS

    .macbook-wrapper{
  background: url('http://pngimg.com/upload/tv_PNG477.png') no-repeat;
  background-size: contain;
  max-width: 900px;
  max-height: 814px;
  width: 100%;
  height: 100%;
  position: absolute;
}

.macbook-wrapper .fluid-width-video-wrapper {
  width: 97.5%;
  max-width: 1009px;
  background: #000;
  z-index: -100;
}