Удаление черной полосы сверху и снизу html5-видео в браузерах Chrome и Safari

Question

Я использую HTML5 видео. В FireFox он работает хорошо, но в Chrome и Safari он показывает толстую черную полосу сверху и снизу. Как избавиться от этого бара?

код,

<video autoplay loop="loop" onended="this.play()" width="100%">
     <source src="videos/video.mp4" type="video/mp4"/>
     <source src="videos/video.webm" type="video/webm" />
</video>

Заранее спасибо

Answer 1

Посмотрите на размеры и / или CSS тега, содержащего ваш тег видео. Это, вероятно, будет div. У меня был один с ростом: 100%. Как только я удалил это, это решило проблему.

Надеюсь, это поможет.

Answer 2

Для меня это было line-height. Установка line-height: 0 в родительском элементе исправила проблему.

Answer 3

Черные полосы уже есть в реальном видео? Мое решение состоит в том, чтобы воспроизвести видео на странице iframe 16/9 и отрегулировать верхнюю (..- px), левую (..- px), высоту (..%) (ИЛИ width%), пока они не будут масштабированы во внешнем. fullscreen-bg .css