Как можно удалить дополнительное пространство над / под HTML5-видео в Safari? - PullRequest
Новая
       21

Как можно удалить дополнительное пространство над / под HTML5-видео в Safari?

2 голосов
/ 04 июня 2019

Я вижу странную ошибку (только) в Safari (последние версии, для настольных компьютеров и мобильных устройств), когда добавляется дополнительное пространство над / под видео HTML5. Это может быть хорошо в некоторых сценариях, но в моем случае оно показывает фоновое изображение, используемое для обхода ошибки видео / постера в IE.

Safari Bug

Я склонен полагать, что это ошибка Safari, так как если бы я переключал различные свойства CSS в инструментах разработки или с помощью JavaScript, проблема исчезла. Подход 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

1 Ответ

1 голос
/ 04 июня 2019

Мне удалось решить проблему, указанную выше, заменив 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;
}

fixed

Обновленная скрипка

...