Question

我正在尝试将视频显示为一个网页，它占据网页窗口的整个大小。

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

我在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窗口可用查看空间的高度相同）？谢谢！

Answer 1

＆＃13;

body {
    margin: 0;
}

video {
  width: 100%;
  height: 100vh;
}

＆＃13;

<video controls> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>

＆＃13;

Answer 2

如果您希望视频始终等于屏幕尺寸（这基本上使其响应），我会这样解决：

<强> 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

Answer 3

＆＃13;

#video{
    position: fixed;
    width: 100%;
    height: 100%;
}

＆＃13;

<video id="video" autoplay></video>

＆＃13;

如何在Web浏览器中显示占用窗口精确高度的视频？

3 个答案: