Question

我试图创建一个位于标题下方的响应式视频背景（因此不是完全全屏）

我的问题是，我无法找到填充空间所需的CSS，维持分辨率，并在较小的屏幕上调整大小（不会产生间隙）。

以下是我正在寻找的确切效果的链接。 http://www.matthewemvintaylor.co.uk/

请注意我不想使用Video.JS或BigVid.JS，因为我在视频源上做了很多ajax的事情，并且不想弄清楚如何制作它们一起工作。

这是我的HTML

<header>
    <div class="navigation">
        title
    </div>
</header>

<div class="content">
    <div class="video-wrapper">
        <video id="video-element" autoplay loop>
        </video>
    </div>
</div>

这是我的CSS

.navigation {
    min-height: 100px;
}

谢谢！

Answer 1

使用百分比值设置视频的宽度和高度在这种情况下，视频是100％宽度和高度是容器

#video-element{
position: absolute;
object-fit: cover;
top: 0;
left: 0;
width:100%;
height:100%;
}

你可以使用
object-fit:cover
增加或减小视频的大小以填充盒子，同时保持其宽高比 JSfiddle

响应式视频CSS

1 个答案: