Если вы когда-нибудь пытались настроить код вставки видео с YouTube, тогда убедились, что не все так просто. Это связано с размерами видео и статическими фиксированными шириной и высотой. На адаптивном и оптимизированном для мобильных устройств веб-сайт необходимо, чтобы видеоролик YouTube изменялся в зависимости от размера браузера или ширины устройства. Поэтому нам нужен оптимизированный код для встраивания YouTube. Можно было бы подумать, что видеоролики со 100% шириной автоматически изменят размер окружающего контейнера. Ну, это совсем не так. Удивительно, но Youtube автоматически не имеет отзывчивого кода для встраивания.
Решение данной задачи довольно простое. Вам нужно обернуть адаптивный код встраивания YouTube с помощью <div> и указать нижний отступ от 50% до 60%. Затем укажите дочерние элементы (iframe, object embed) 100% ширину, высоту 100%, с абсолютной позицией. Это заставит элементы встраивания автоматически расширять ширину полосы пропускания.
Сначала вам нужно добавить следующее в таблицу стилей:
.video-container{ position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden }
.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 width="663" height="373" src="https://www.youtube.com/embed/qjo3KryTtBk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
Также можно реализовать адаптивное видео YouTube и динамически с помощью jQuery: Адаптивное видео YouTube с помощью jQuery.
Теперь ваши видео должны быть адаптивными и готовыми к просмотру на планшетах и мобильных устройствах.