При вставке видео 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 */
На этом всё — сам был удивлен простоте решения — но оно действительно отлично работает.
На авторство не перетндую — код взял на здесь — ребятам огромное спасибо.
На этом все — до новых статей. Удачи!