Как вставить видео на ширину экрана? HTML5 не катит??

Question

[Greg Plitt]

Всем привет!

Как вставить видео в режиме "кино" ? Имеется ввиду, формат 16х8, только без навязанных выравниваний пропорций.



Нужно, чтобы на месте красного, было или растянуто видео (в идеале) или был черный цвет (сделать самому через css div table?)

К примеру, у youtube есть кнопка, которая включает видео так, как мне надо:


Но моё видео должно быть у меня на сервере, должен быть автозапуск.
Сейчас код такой:

<video width="720" height="300" controls autoplay>
  <source src="/kosmos.mp4 width="100"  type="video/mp4">
  <source src="/kosmos.webm" type="video/webm">
  Сожалею; ваш браузер не поддерживает HTML5 видео в WebM с VP8 или MP4 с H.264.

</video>

Answer 1

[lnked]

<div class="video__iframe">
	<video id="video" width="100%" height="auto" controls autoplay loop preload="auto">
		<source src="/kosmos.mp4">
		<source src="/kosmos.webm" type="video/webm">
		<p>Сожалею; ваш браузер не поддерживает HTML5 видео в WebM с VP8 или MP4 с H.264.</p>
	</video>
</div

.video__iframe {
	width: 100%;
	height: 100%;
	position: absolute;
}

.video__iframe video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
}

Comments

[Greg Plitt]

Не то. Он так растягивает "control", но не затрагивает видео. Соотношение пропорций строгое всё равно.
скрин: prntscr.com/auwjpi

в css задавал 100% для width и 20% для height - не помогло

Answer 2

[Greg Plitt]

Вот если два видео вставлять сразу, то по ширине то что надо,
вот как можно сделать одно видео по такому формату, без черных полос.

Comments

[Greg Plitt]

Удалось всё реализовать с помощью FlowPlayer (html). Легкий контроль боковых панелей, ресайз умный, всё шикарно.