响应式全屏 HTML5 视频问题

Question

我正在尝试实现全屏 html5 视频 splash/landing 页面，它在桌面浏览器上运行良好，但在视频下方留下黑色 bar/space。

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

谢谢你的帮助，我希望这对其他人有用。

响应式全屏 HTML5 视频问题

Responsive Fullscreen HTML5 Video Issue

css

html

html5-video

html5-fullscreen