我正在尝试将视频显示为恰好占据整个网络窗口大小的网页。
视频的宽度是可以的。但是，视频的高度比它应该的“长”（即需要向上滚动才能看到视频的底部）。
我在 HTML 页面中有以下代码：
<body>
<video id="video" autoplay width="100%" height="100%"></video>
</body>
以及以下 CSS 代码：
html {
min-height: 100%;
min-width: 100%;
}
body {
margin: 0 0 0 0;
}
video {
margin: 0 0 0 0;
}
（视频由 JavaScript 控制并且可以正常工作，即视频播放。）
该问题是，视频超出了高度，它是截断（即底部视频的部分超越了浏览器窗口，需要向上滚动才能看到它）。
如何使窗口恰好占据窗口的高度（不多也不少 - 与 Web 窗口的可用查看空间的高度相同）？谢谢！
如果您希望视频始终等于屏幕尺寸（这基本上使它具有响应性），我会这样解决：
HTML：
<div class="video-con">
<video id="video" autoplay></video>
</div>
CSS：
video { object-fit: fill; }
.video-con {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
#video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
现场演示： JSFiddle
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句