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处设置了代码笔的工作演示。我没有一个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;
}

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

1 个答案: