如何在 div 背景上显示视频？答案

【问题标题】：How can I fit displayed video on div background?如何在 div 背景上显示视频？
【发布时间】：2017-02-12 15:46:21
【问题描述】：

有人可以帮我把视频放在网站背景上吗？视频源来自 Vimeo ...我使用 iframe 将视频设置为 src

<iframe src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

你可以在图片上看到我需要的状态

【问题讨论】：

确保黑条不是视频本身的一部分。

标签： javascript css html iframe vimeo

【解决方案1】：

给iframe标签自己的类，放到父容器中，像这样。

<div class="container">
    <iframe class="vid" src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

然后使用 CSS 转换放大视频，将容器宽度设置为 100%，高度设置为 500px，并隐藏溢出。

.vid{
    transform: scale(2.5);
}

.container{
    width: 100%;
    height: 500px;
    overflow: hidden;
}

并将溢出隐藏在这个“容器”div 将要位于的任何对象上。

【讨论】：

【解决方案2】：

该背景似乎是视频的一部分。您可以更改宽度以切断黑色背景，如本例所示。 width:93%https://jsfiddle.net/ps96r3ub/

"https://player.vimeo.com/video/45628635?loop=1&background=1" width="93%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>

【讨论】：

但我需要完整网站宽度和固定高度的视频...因此我需要缩放视频并填充它
左右区域似乎是视频本身的一部分，可以使用 transform: scale(1.133, 1);在框架上拉伸视频，因此您看不到黑色背景，因为容器将其切断，或者只是改变宽度以像以前一样将其切断。这个差距在源这里player.vimeo.com/video/45628635?loop=1&background=1

【解决方案3】：

来自 Swordys 代码...检查这个 sn-p...

.container{
  width:100%;
  height:500px;
  overflow:hidden;
    }
.vid{
 transform: scale(2.5);
}

<div class="container">
<iframe class="vid" src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="80%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>

【讨论】：

这是我的实际状态人......我需要删除黑色边框并缩放内容以适应具有固定高度的网站宽度