视频无法全屏？视频与屏幕边缘存在间隙的技术求助

我用以下HTML和CSS实现视频展示时，发现视频与窗口边缘存在小间隙，无法占满全屏。已设置视频width:100%，希望实现视频全屏显示，消除所有空白区域，请求技术帮助。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yoga </title>
    <style>
        .video {
            filter:brightness(40%);
            width: 100%;
            height: 750px;
            object-fit: fill;
            z-index: -1;
        }
        @media (max-width:768px){
            .video {
            filter:brightness(40%);
            width: 100%;
            height: 650px;
            object-fit: fill;
            z-index: -1;
        }
        }
    </style>
</head>

<body>

    <section  class="head">
        <video autoplay="true" loop="true" muted class="video">
            <source src="images/istockphoto-1305960252-640_adpp_is.mp4" type="video/mp4">
            </source>
        </video>
    </section>

</body>

</html>

问题截图：

问题根源是浏览器默认给html、body和section元素加了margin/padding，再加上视频用了固定高度，导致无法完全铺满。按下面修改代码即可：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yoga </title>
    <style>
        /* 重置浏览器默认样式，消除间隙 */
        html, body, .head {
            margin: 0;
            padding: 0;
            overflow: hidden; /* 防止出现滚动条 */
        }

        .video {
            filter: brightness(40%);
            width: 100vw; /* 占满整个视口宽度 */
            height: 100vh; /* 占满整个视口高度 */
            object-fit: cover; /* 保持视频比例，同时铺满容器，比fill更自然 */
            z-index: -1;
            display: block; /* 消除视频可能的行内元素间隙 */
        }
    </style>
</head>

<body>
    <section class="head">
        <video autoplay loop muted class="video">
            <source src="images/istockphoto-1305960252-640_adpp_is.mp4" type="video/mp4">
        </video>
    </section>
</body>

</html>

关键修改说明 #

• 重置html、body和.head的margin和padding为0，彻底消除默认间隙；加overflow: hidden避免视频超出视口时出现滚动条。
• 把视频的宽高改成100vw和100vh，让视频自适应整个浏览器视口大小，替代原来的固定高度。
• 将object-fit: fill改为object-fit: cover，这样视频会保持自身比例铺满容器，不会拉伸变形；如果坚持要完全填充不留黑边，也可以保留fill。
• 给视频加display: block，消除行内元素默认的底部间隙。

内容的提问来源于stack exchange，提问作者meruvu likith