如何删除Safari中HTML5视频上方/下方的多余空间？

Question

我在Safari（最新版本，台式机和移动设备）中看到一个奇怪的错误（仅），该错误在HTML5视频的上方/下方添加了额外的空间。在某些情况下这可能还可以，但是在我的情况下，它揭示了用于解决IE视频/海报错误的背景图像。

我倾向于认为这是一个Safari错误，好像我在开发工具中或使用JavaScript切换各种CSS属性一样，问题就消失了。 JS方法可能可能是一种解决方法，但是用户必须忍受未样式化内容的泛滥，而我宁愿在CSS级别上解决或纠正该问题。 （我尝试了各种解决方法：在视频上设置高度，在视频上更改显示）

以下是相关的HTML：

<section class="series" style="display: block;">
  <video autoplay="" class="series-video series-video-desktop" loop="" muted="" playsinline="" poster="data:image/gif,AAAA" src="https://iandevlin.com/examples/speechapi-video/video/big-buck-bunny.mp4"
    style="background-image: url(http://fillmurray.com/1024/768);"></video>
</section>

...和CSS：

section {
  display: block;
  min-height: 100%;
  width: 100%;
}

video {
  background: none no-repeat 50% 50% transparent;
  background-size: contain;
  display: inline-block;
  height: auto;
  width: 100%;
}

另外，FWIW，这是我的JS修复程序：

window.addEventListener('load', function () {
  var xs = document.querySelectorAll('.series');
  [].slice.call(xs).forEach(function (x) {
    // doing this via CSS has no effect
    x.style.setProperty('display', 'block');
  });
});

JSFiddle

Answer 1

通过将width替换为min-width和max-width，我能够解决上述问题：

video {
  background: none no-repeat 50% 50% transparent;
  background-size: contain;
  display: inline-block;
  height: auto;
  /* width: 100%; */
  min-width: 100%;
  max-width: 999px;
}

Updated Fiddle