Search code examples
htmlcsssafarimobile-safari

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

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="https://iandevlin.com/examples/speechapi-video/video/big-buck-bunny.mp4"
    style="background-image: url(http://fillmurray.com/1024/768);"></video>
</section>

... 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');
  [].slice.call(xs).forEach(function (x) {
    // doing this via CSS has no effect
    x.style.setProperty('display', 'block');
  });
});

JSFiddle

Solution

  • I was able to solve the issue noted above by replacing width with min-width and 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;
}

    fixed

    Updated Fiddle