javascript - 如何在 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

给 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，并 overflow hidden 部分。

.vid{
    transform: scale(2.5);
}

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

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