Fatal编程技术网
  • html/
  • Html 如何在占据窗口确切高度的web浏览器中显示视频？

Html 如何在占据窗口确切高度的web浏览器中显示视频？

html css

Html 如何在占据窗口确切高度的web浏览器中显示视频？,html,css,html5-video,Html,Css,Html5 Video,我试图将视频显示为一个网页，该网页占据了整个网页窗口的大小 视频的宽度正常。但是，视频的高度比它应该的“长”（即需要向上滚动才能看到视频的底部） 我在HTML页面中有以下代码： <body> <video id="video" autoplay width="100%" height="100%"></video> </body> （视频由JavaScript控制，可以正常播放。） 问题是视频超出了高度，并且被截断（即，底部视频的一部分超出了浏览

我试图将视频显示为一个网页，该网页占据了整个网页窗口的大小

视频的宽度正常。但是，视频的高度比它应该的“长”（即需要向上滚动才能看到视频的底部）

我在HTML页面中有以下代码：

<body>
<video id="video" autoplay width="100%" height="100%"></video>
</body>
（视频由JavaScript控制，可以正常播放。）

问题是视频超出了高度，并且被截断（即，底部视频的一部分超出了浏览器窗口，需要向上滚动才能看到）

如何使窗口正好占据窗口的高度（不多也不少-与web窗口的可用查看空间高度相同）？谢谢

正文{
保证金：0；
}
录像带{
宽度：100%；
高度：100vh；
}
如果您希望视频始终与屏幕大小相等（这基本上使其具有响应性），我会这样解决：

HTML:

<div class="video-con">
    <video id="video" autoplay></video>
</div>

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%;
}

现场演示：

#视频{
位置：固定；
宽度：100%；
身高：100%；
}
您是否尝试将实际值设置为html样式，然后使用视频的0边距填充？另外，请注意，因为您希望所有四边都有0边距，所以可以使用速记“边距：0；”。回答得好！我会使用“object fit:cover；”来裁剪视频，而不是在不同的设备中按比例拉伸视频。 
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%;
}