Как разместить адаптивное видео Youtube на сайте

Как разместить видео Youtube на адаптивной странице сайта?

При добавлении видео Youtube на страницу, которая сверстана по принципу адаптивности, то есть с изменением размера элементов в зависимости от размера экрана устройства пользователя, могут возникнуть проблемы. Дело в том, что недостаточно просто указать в стилях width и height равными 100%. Чтобы видео Youtube меняло размер в зависимости от ширины страницы, используйте следующую конструкцию. В таблице стилей указываем эти свойства:

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

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

В html размещаем такой код:

<div class="video-container">
<iframe ...></iframe>
</div>

Для тех, кто не знает "<iframe ...></iframe>" - это код, который дает нам Youtube. Его можно получить нажав на кнопку "Поделиться" под роликом на сайте Ютуба и выбрав пункт "HTML-код".