奇怪的HTML5视频问题

Question

请看一下这个小提琴http://jsfiddle.net/rwbcf/

如果我们有16：9显示：

当我们有16：9以外的宽高比显示时出现问题。

你可以看到视频底部的空白空间，并且我们调整浏览器窗口的大小（获得更小的宽度）空白空间越来越多。

是否有任何解决方案，如缩放，裁剪和缩放以删除此空白区域？我弄不清楚。提前致谢

HTML

<div id="video-viewport">

        <video id="bg" autoplay loop preload="none" tabindex="0">

           <source src="http://goo.gl/MkY4i" type="video/mp4" />

       </video>
</div>

CSS

html, body {
    min-width:100%;
    background:#000;
    overflow:hidden;
}

body{
   margin: 0;
   padding: 0 ;
}
#bg {
    width:100%;
    height:auto;
}

#video-viewport {
    overflow: hidden;
    width:100%;
    height:100%;    
    z-index: -1; /* for accessing the video by click */
}

Answer 1

视频元素的规范说这应该发生，它相当于以下CSS：

video { object-fit: contain; }

如果您不介意忽略宽高比，可以更改此项：

video { object-fit: fill; }

或者，如果您想要有效放大（保留纵横比，但裁剪部分）

video { object-fit: cover; }

你可以check out browser support for the object-fit property。

Answer 2

我有完全相同的问题，虽然空白空间出现在全景电影的上方和下方 - 这是完全不受欢迎的行为。

环境：   视频{object-fit：fill; }

非常适合我！

Answer 3

要删除黑色空格，视频大小应该与容器大小相同，因此请将其添加到您的css：

#video-viewport {
    width:inherit;
    height:inherit;    
}