How can the extra space above/below HTML5 video in Safari be removed?

Keywords: html css safari mobile-safari


I'm seeing a strange bug (only) in Safari (recent versions, desktop and mobile) where extra space is added above/below an HTML5 video. That might be okay in some scenarios, but in mine it reveals a background image being used to work around an IE video/poster bug.

Safari Bug

I'm inclined to believe that this is a Safari bug, as if I toggle various CSS properties within the dev tools or with JavaScript, the problem goes away. The JS approach could potentially be a solve, but the user has to suffer through the flash of unstyled content and I'd prefer to work around or correct the issue at the CSS level. (I've tried various workarounds: setting height on video, changing display on video)

Here's the relevant HTML:

<section class="series" style="display: block;">
  <video autoplay="" class="series-video series-video-desktop" loop="" muted="" playsinline="" poster="data:image/gif,AAAA" src=""
    style="background-image: url(;"></video>

... and 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%;

Also, FWIW, here's my JS fix:

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