如何让显示的视频适合 div 背景？

Question

谁能帮我把视频放在网站背景上？视频源来自 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>

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

Answer 1

那个背景似乎是视频的一部分。您可以像本例中那样更改宽度以切断黑色背景。 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>

Answer 2

来自 Swordys 代码...检查此代码段...

.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>

Answer 3

给 iframe 标签自己 class，把它放在父容器中，像这样。

<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%，高度设置为 500 像素并隐藏溢出部分。

.vid{
    transform: scale(2.5);
}

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

并将溢出隐藏在这个 "container" div 将位于的任何对象上。

如何让显示的视频适合 div 背景？

How can I fit displayed video on div background?

html

javascript

css

iframe

vimeo