Как сделать aspect-ratio: 16 / 9 с помощью padding?

Question

[wakenbyWork]

В общем есть фрейм с видео из вк. Хочу для него сделать aspect-ratio: 16 / 9 для красивого адаптива, но поддержка не очень хорошая.

Как можно padding сделать 16/9? Что то не могу понять и найти))

Answer 1

[Алексей Уколов]

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

https://css-tricks.com/aspect-ratio-boxes/

Answer 2

[Артем Золин]

.aspect-ratio {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%; /* 16:9 Aspect Ratio */
	overflow: hidden;
}

.aspect-ratio iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-width: 0;
	outline-width: 0;
}