javascript - 全屏 html 页面和无黑边的全屏视频

Question

我有这个 html:

<div id="container">
  <video id="video" src="video.ogv" loop></video>
</div>

Div“容器”和视频填满整个屏幕

#container {
   position: absolute;
   top: 0px:
   left: 0px;
   height: 100%;
   width: 100%;  
}

#container video {
   position: absolute;
   top: 0px:
   left: 0px;
   height: 100%;
   width: 100%;  
}

我测试的显示器是 1920x1080，而视频是 1280x720:显然我得到了两个黑色边框(顶部和底部)。

如何无边框且不拉伸(stretch)地观看视频？

我已经搜索过了，比如 here ，但不是我的情况。

编辑

我忘记了 min-width: 和 min-height 属性，正如 HoangHieu 所建议的!

CSS 变成:

#container video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

Answer 1

您可以使用属性:min-width: 和 min-height: