Safari 上的响应式视频横幅顶部和底部有巨大差距

Question

我正在尝试使用 html5 标签将一个非常简单的视频实现为网站上的横幅。我只需要它是全宽和响应式的，这似乎在 Chrome 和 Firefox 中完美运行，但在 Safari 中却不行。

这是从更复杂的 wordpress 页面中提取的简化版本，使用完全相同的标记，并且发生了同样的情况。 http://noisilyfestival.com/video-test.html

我已将视频背景设置为红色，在 Safari 中看到顶部和底部有巨大的间隙，而在 Firefox 和 Chrome 中它齐平。

我这辈子都弄不明白这是怎么回事！我已将视频设置为 display:block，这修复了底部的几个像素间隙，但无法解决此问题。提前致谢！

Answer 1

我删除了display:block；来自#homepage-video 和 Safari 看起来还不错。

Answer 2

有人向我指出，在调整浏览器宽度时，问题会自行解决。因此，内在比率技术是确保跨浏览器工作的最有效方法...... http://alistapart.com/article/creating-intrinsic-ratios-for-video

现在可以在我测试过的所有浏览器上正常工作。