Как сделать так, чтобы высота блока видео с ютуба определялась размерами экрана?

Question

[ligisayan]

Есть блок с зацикленным видео с ютуба Фидл

<iframe class="inner" frameborder="0" allowfullscreen="1" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/TP1U4fySrCI?playlist=TP1U4fySrCI&iv_load_policy=3&enablejsapi=1&disablekb=1&autoplay=1&controls=0&showinfo=0&rel=0&loop=1&wmode=transparent&origin=http%3A%2F%2Flike2.likemedia.by&widgetid=1"
      id="widget2" style="max-width: 1000%;  width: 100%; height: 785.25px;"></iframe>

Как сделать так, чтобы в зависимости от разрешения экрана высота сама подстраивалась, не обрезалась картинка и не возникало черных полос?

Answer 1

[Андрей Гончаров]

fitvids
Это если вообще ничего самому не писать

Иначе обертка нужна над видеофреймом с ютуба с хаком на css

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Comments

[ligisayan]

Андрей Гончаров да, спасибо! https://jsfiddle.net/mfh26hvc/1/

Answer 2

[stepelive]

Есть вполне удобное средство для быстрого создания адаптивного виджета
dev-assistant.com/youtubewidget

Answer 3

[Дима Паутов]

Никак не сделать. Вы можете изощриться и сделать с iframe некое подобие background-size: cover испсользуя абсолютное позиционирование и трансформации

Comments

[ligisayan]

Дима Турков ну да - решение выше

[Дима Паутов]

ligisayan: так вы сказали размерами экрана, а не масштабировалось внутри фрейма. В обычном блоке да, никакой проблемы. Такой хак и в бутстрапе есть. Он давно многим известен

[ligisayan]

Дима Турков: а какой хак в бутстрапе? - расскажите плиз

[Дима Паутов]

ligisayan: getbootstrap.com/components/#responsive-embed

Answer 4

[Артём]

Так height: 785.25px; зафиксирована же у Вас.