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

我试图将视频显示为占据网页窗口整个大小的网页。如何在网页浏览器中显示占用窗口的确切高度的视频？

视频的宽度是确定的。然而，视频的高度比应该是“更长”（即需要向上滚动以查看视频的底部）。

我在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即在视频播放控制，它的工作原理，）

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

如何使窗口占据窗口的高度（不多，不少于 - 窗口的可用查看空间的高度相同）？谢谢！

来源

2017-04-19 ikevin8me

你试过实际值设置为你的HTML样式，然后使用的0保证金视频填补？此外，只是一个说明，因为你希望所有四方都有0的余量，你可以使用速记'margin：0;'。 – mrkd1991

如果您希望视频总是等于屏幕尺寸（这基本上使得它响应），我会解决这个问题是这样的：

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

来源

2017-04-19 14:16:44 NullDev

很好的答案！我会使用“object-fit：cover;”裁剪视频，而不是在不同的设备中将其拉伸。 – ikevin8me

body { 
 
    margin: 0; 
 
} 
 

 
video { 
 
    width: 100%; 
 
    height: 100vh; 
 
}

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

来源

2017-04-19 14:16:26

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

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

来源

2017-04-19 14:35:23

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

回答

相关问题