Как сделать адаптивное видео с iframe вставляемое с YouTube или Vimeo

Как адаптировать видео с YouTube

Задача в следующем: вставить на сайт код видео с YouTube, при этом если вставлять тот самый код, который предлагает видеохостинг, то там размеры фиксированы.

Пример кода с ютуба такой:

<iframe width="560" height="315" src="https://www.youtube.com/embed/НаборБуквЦифр" allowfullscreen=""></iframe

Как видим это 560px по ширине и 315px по высоте. Но если сайт меняет ширину на разных разрешениях экрана, то соответственно нужно, чтобы iframe с видео, тоже подстраивался, если оставить как есть, то на экранах с разрешением ниже 560px по ширине, вставляемое видео ну ни как не поместится. Нам нужно сделать показываемое видео в нормальных пропорциях на всю ширину сайта или того блока, где оно вставлено.

Решение

Для iframe нужно указать высоту, если ее не указать, то браузеры по умолчанию выставят высоту в 150px. Видео на экране отобразится узкой горизонтальной полосой и будет проигрываться в поле размером в половину спичечного коробка. На практике почти все браузеры отображают iframe, canvas, embed и object по умолчанию с шириной 300px и высотой 150px по высоте.

Чтобы нормально все отображалось, нужно поместить iframe в div блок с заданными пропорциями. А вставляемое видео нужно абсолютно позиционировать в этом самом div. При таком способе видео в iframe будет увеличиваться и уменьшаться вслед за родительским div и сохранять нормальные пропорции.

Меняем имеющий код (пример выше) на:

<div class="video">
  <iframe src="https://www.youtube.com/embed/НаборБуквЦифр" allowfullscreen=""></iframe>
</div>

В файл стилей (обычно style.css) или перед нашим кодом обертываем в теги <style></style> следующий код CSS:

.video {
  position:relative;
  padding-bottom:56.25%;
  height:0;
}
.video iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

Надеюсь данный метод поможет вам. Пишите замечания в комментариях.