响应式视频 CSS

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