Как сделать видео респонсив?

Question

[Илья]

Необходимо, чтобы видео отображалось на всю ширину экрана и на всю высоту родителя. И при этом равномерно уменьшалось в зависимости от разных устройств. Как это сделать? Может кто поделится образцом? Вот моя неудачная попытка. Кто-нибудь может показать как нужно это сделать?

<iframe class="uk-responsive-width" width="100%" height="100%" src="https://www.youtube.com/embed/p4nohCcIPuI?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Answer 1

[Максим Тимофеев]

Геморойная штука, но решение есть и оно проще, чем кажется до его нахождения:
https://www.w3schools.com/howto/howto_css_aspect_r...
Сам когда-то тупил в этом месте))

Comments

[Илья]

Да, так себе задача.
Спасибо за ответ!

Answer 2

[zooks]

iframe {
  width: 100%;
  height: auto;
}

Comments

[Максим Тимофеев]

и растянется он только на высоту родителя и то если явно родителю высоту в пикселях задать
Задача сохранения aspect ratio и решается через padding

Answer 3

[Oleg]

<div>
<iframe src="https://www.youtube.com/embed/p4nohCcIPuI?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

div {
	position: relative;
	width: 100%;
	padding-bottom: 56.18%;
}
div > iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}