При вставке видео YouTube к себе на сайт Вы непременно столкнетесь с проблемой на правильного его отображения. К счастью сделать адаптивный вывод youtube-видео на сайте достаточно просто. В этой статье речь пойдет именно об этом.

Итак, нужно выполнить несколько простых шагов. Поехали:

1. Сначала берем ролик, и под ним нажимаем кнопку «Поделиться», а в появившемся окне — «Встроить».
Откроется окно, наподобие следующего:

Копируем код iframe и идем дальше.

2. Оборачиваем полученный код в блок:

3. Указываем стили для блока:

/* youtube */
.video-responsive {
   height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
 
    margin: 0px auto;
    /* max-width: 800px;*/
    width: 75%;
}
.video-responsive iframe {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
@media (max-width: 767px) {
   .video-responsive {
       width: 100%;
   }
}
/* end youtube */

На этом всё — сам был удивлен простоте решения — но оно действительно отлично работает.
На авторство не перетндую — код взял на здесь — ребятам огромное спасибо.

На этом все — до новых статей. Удачи!