Часто перед разработчиком стоит задача - встроить видео нормальных пропорций во всю ширину заданного блока, при этом не нарушая адаптивную верстку сайта. Это видео может быть с видеохостинга YouTube или ему подобных. Как правило, оно вставляется посредством iframe (также, это может быть canvas, embed или object, что не меняет сути).
Особенность iframe заключается в том, что для него необходимо принудительно указывать высоту. Если этого не сделать браузер выставит для iframe высоту по умолчанию в 150px. При такой высоте ifram будет отображаться в виде узкой горизонтальной полосы, а само видео окажется и того меньше.
Решается проблема достаточно просто, посредством одного css. По сути, необходимо поместить iframe в блок div с заданными пропорциями, а само видео позиционировать absolute внутри этого div. В результате, видео внутри iframe будет адаптивно изменяться вслед за родительским div, сохраняя нормальные пропорции.
HTML:
<div class="video-adaptive">
здесь видео в iframe
</div>
CSS:
.video-adaptive {position:relative;padding-bottom:56.25%;}
.video-adaptive iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
Величина padding-bottom в 56.25% примерно соответствует соотношению сторон 16:9 (в данный момент стандарт YouTube). Вместо iframe может быть другой необходимый тег.
Пример вставки видео с телеканала "Культура" можно посмотреть на странице Амазонка