Резиновое видео?

Question

[WildKayote]

Есть такая структура страницы:

Нужно адаптировать под 3 разрешения экрана: 1920x1080 and 2160x1440 and 2736x1574
Проблема в том, что видео нужно растянуть на максимальную ширину и высоту, но оставить место под меню, а значит -250px.
Также видео может быть рандомных разрешений, поэтому если растягивать и получится "не красиво" - не имеет значения. Лишь бы растянулось :) Спасибо.
Способ с calc не получился. Ссылка

Comments

[Ярослав Иванов]

И что за ссылка. Где видео ?

[WildKayote]

Ярослав Иванов: там таймер стоит, меньше секунды. Видео скрыто, пока пользователь активен. Сейчас уберу

[Stalker_RED]

А все у кого меньше чем fullHD не смогут даже поскроллить? Ну норм.

[WildKayote]

Stalker_RED: не для ПК, для тачскрин экранов. скролл заказчик сказал убрать

Answer 1

[xmoonlight]

<style>
*{margin:0;padding:0;}
iframe {border:0}
.iframebox {
    width: 100vw;
    height: 70vw;
}
@media screen and (min-aspect-ratio: 10/7) {
	.iframebox {
		width: 142.8571428571429vh;
		height: 100vh;
	}
}
</style>
<iframe class="iframebox" src="https://www.youtube.com/embed/9G-eLuTuwqc"></iframe>

Comments

[WildKayote]

Видео локально будет только. И сама страница только локально будет запущена

[xmoonlight]

WildKayote: ну это уже как хотите.... ) Будет работать в любом случае.

[WildKayote]

xmoonlight: Спасибо) Первый раз вижу "min-aspect-ratio", обязательно попробую

Answer 2

[Гаджимари Качаев]

WildKayote попробуйте этот плагин, может сработает fitvidsjs.com

Comments

[WildKayote]

задача уже была сделана, но на плагин спасибо, сохраню

Answer 3

[Stepanya]

Вроде как стандарт html5 никак не позволяет непропорционально растягивать видео.
Поэтому вам надо сконвертировать 3 видео для нужных вам разрешений и отдавать их пользователю в зависимости от его разрешения

Comments

[WildKayote]

А как нибудь через скрипт нарушить пропорции нельзя? Знаю, что для графики через css это делается, но для видео не получается это

[Stepanya]

WildKayote: stackoverflow.com/questions/4000818/scale-html5-vi...

Answer 4

[whoisthere]

В бутстрапе есть решение

.b-embed-responsive {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
}
.b-embed-responsive .b-embed-responsive-item,
.b-embed-responsive iframe,
.b-embed-responsive embed,
.b-embed-responsive object,
.b-embed-responsive video {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	border: 0;
}
.b-embed-responsive-16by9 {
	padding-bottom: 56.25%;
}
.b-embed-responsive-4by3 {
	padding-bottom: 75%;
}

<div class="b-embed-responsive b-embed-responsive-16by9">
<iframe allowfullscreen="" class="b-embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&amp;showinfo=0"></iframe>
</div>