css - 响应式全屏 HTML5 视频问题

Question

我正在尝试实现一个全屏 html5 视频初始页面/登录页面，它在桌面浏览器上运行良好，但它在视频下方留下了一个黑条/空格。

问题是在较小的屏幕或移动设备上测试播放时，它会破坏响应能力并且无法显示海报图像。我确信这是一个相当简单的修复，但是，这是第一次使用 HTML5 视频。

使用以下 CSS:

video {
position: absolute;
z-index: 0;
width: 100%;
height: auto;
}

以及以下 HTML:

<video autoplay="" loop="" muted="" poster="img/poster.jpg">
        <source src="video/energycrisis.mp4" type="video/mp4">
        <source src="video/energycrisis.webm" type="video/webm">
        <source src="video/energycrisis.ogg" type="video/ogg">
</video>

我尝试将 CSS 更改为:

video {
position: absolute;
z-index: 0;
min-width: 100%;
min-height: 100%;
overflow: hidden;
}

此 CSS 完全用视频覆盖了视口(viewport)，这是期望的结果，但同样，它在桌面和响应式上都溢出了，进一步破坏了响应式布局。

如有任何帮助，我们将不胜感激。

Answer 1

感谢@sdcr 提供的信息，不幸的是它没有成功，你的 css 为我提供了类似的结果。

不过，我找到了一个非常简单的修复方法!通常，我会花几个小时，今天回到家后，我会在 5 分钟内喝杯茶解决问题。

到目前为止，这是最简单的方法，使用由一些简单的 jQuery 代码组成的插件。

http://vodkabears.github.io/vide/

无论如何感谢您的帮助，我希望这对其他人有用。