Вставка видео с YouTube в адаптивный дизайн

[neurotechnic]

Понадобилось встраивать видео в адаптивную верстку, но код выдаваемый YouTube имеет фиксированные размеры. И на низких разрешениях это ломало адаптивность. Естественно сразу в голову пришло сделать width=100%, но без указания высоты получалось непропорциональное видео с маленькой высотой, а при указании высоты в пикселях, соответственно, тоже теряли пропорции, т.к. видео всегда получалось одной высоты.

Очень простое и изящное решение я нашел в блоге у John Surdakowski.

CSS:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTML: