如何调整video.js视频高度以填满移动端屏幕（消除黑背景）

我用video.js实现了一个视频，PC端能铺满整个屏幕（高度与宽度），但移动端只显示较小高度，剩余区域是黑色背景。请问怎么调整视频实际尺寸，让它填满移动端屏幕的100%高度，消除黑色背景？

以下是我尝试过的代码：

HTML代码 #

<div class="top">
    <video id="my-video" class="video-js" responsive="true" height="100%" object-fit="cover" autoplay="true" preload="true" responsive="true"
        loop="true" data-setup='{"fluid": true}' muted>
        <source src="images/Untitled.mov" type="video/mp4" />
        <source src="images/Untitled.mov" type="video/webm" />
    </video>
    <script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script>
</div>

CSS代码 #

.top {
    width: 100%;
    height: 100vh;
}

.video-js {
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -50;
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin-top: -95px;
}

1. 修复核心冲突与定位问题 #

• 移除.video-js中的margin-top: -95px：这个负边距会让视频在移动端向上偏移，直接导致底部出现黑边。
• 给.top添加position: relative：子元素用了绝对定位，父元素需要相对定位来限制子元素的定位范围，避免视频脱离容器边界。
• 关闭video.js的fluid模式：data-setup='{"fluid": true}'会让video.js自动按视频比例调整尺寸，和全屏覆盖需求冲突，改成data-setup='{}'即可。

2. 优化移动端视口适配 #

在HTML头部添加视口元标签，确保移动端浏览器正确识别屏幕尺寸：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3. 最终调整后的代码 #

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<div class="top">
    <video id="my-video" class="video-js" autoplay="true" preload="true" loop="true" data-setup='{}' muted>
        <source src="images/Untitled.mov" type="video/mp4" />
        <source src="images/Untitled.mov" type="video/webm" />
    </video>
    <script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script>
</div>

CSS

/* 重置默认边距，避免页面出现滚动条或间隙 */
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.top {
    width: 100vw;
    height: 100vh;
    position: relative; /* 限制绝对定位的子元素范围 */
    overflow: hidden;
}

.video-js {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -50;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持视频比例，同时覆盖整个容器 */
}

关键说明 #

• object-fit: cover会让视频保持原有比例，同时填满整个容器，超出部分自动裁剪，不会出现黑边。
• html, body的重置是为了消除浏览器默认的边距和滚动条，确保视频完全铺满屏幕。
• 移除了HTML中冗余的responsive="true"和height="100%"属性，这些属性对全屏覆盖需求无帮助，反而可能干扰样式生效。

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