响应式全屏 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 完全用视频覆盖视口，这是所需的结果，但同样，它在桌面和响应式上都溢出，进一步破坏了响应式布局。

任何帮助将不胜感激。

Answer 1

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

然而，我找到了一个非常简单的解决方法！通常情况下，我会花上几个小时，今天回家后，我会在 5 分钟内用一杯茶解决它。

目前为止最简单的方法，使用由一小段 jQuery 代码组成的插件。

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

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