jquery - 需要使用 CSS 调整 HTML5 视频的大小

Question

我有这个example .我只需要制作视频 height:600px; 而不是固定位置，我只想在我网站的第一部分制作它，当我尝试更改位置和高度时，视频会变小，我应该用 div 或其他东西包装它吗？

HTML :

<div id="bg">
<video src="video/video.mp4" id="bg-video" muted autoplay loop ></video>
</div>

CSS:

#bg {
    position: static;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
}

#bg video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
    filter: blur(3px);
    -webkit-filter: blur(3px);
}

Answer 1

首先，要使视频位于页面顶部，您必须将包装 div 的位置更改为绝对位置。

那么你还得调整当前的相对高度(200%)，设置为固定的600px。要使视频完全填充 div 的 600px，请将视频高度设置为 100%(或也设置为 600px)。您可能还想删除 div 中的任何填充或视频中的边距。

请注意，使用此代码，您的视频仍将具有相对宽度!只需将我对高度所做的更改也应用到这些东西即可。

#bg {
 position: absolute;
 top: 0px;
 left: -50%;
 width: 200%;
 height: 600px;
 padding: 0px;
}

#bg video {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: 0 auto;
 min-width: 50%;
 height: 100%;
 filter: blur(3px);
 -webkit-filter: blur(3px);
}