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/

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

响应式全屏HTML5视频问题

1 个答案: