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

Дорогие друзья, хочу поделиться с вами одним полезным моментом.

Видео с Youtube очень полезно размещать на сайте. Это контент, который можно и нужно использовать в дополнение к вашим текстам.

Кроме этого, просматривая видео, посетители проводят больше времени на страницах вашего сайта, что положительно сказывается на поведенческих факторах и позициях. Можете почитать мой SEO эксперимент: как видео повышает позиции.

Но есть одна проблема. При вставке видео с Youtube у многих сайтов из-за особенностей верстки видеоролики не получаются адаптивными. То есть не меняют свои размеры автоматически, подстраиваясь под размер экрана пользователя.

Бывает, что дефолтный код вставки видео нормально отображается. Но бывает, что и нет.

Покажу на примере. Если вставить ролик с YouTube на мой блог, используя предложенный сервисом код, то видео на мобильных устройствах будет выглядеть вот так:

Вроде и по размеру экрана, но на деле выглядит далеко не лучшим образом. Плюс, когда включаешь видео, то вверху и внизу получаются черные участки:

🔥 Кстати! Я провожу платный курс по продвижению англоязычных сайтов SEO Шаолинь. Если интересует, можете купить на его сайте seoshaolin.com. Для своих читателей делаю хорошую скидку. Для получения скидки пишите мне на globatorseo@gmail.com с темой "Курс" или в Telegram @mikeshakin.

Приглашаю вас подписаться на мои каналы в Telegram:

@shakinru - продвижение в рунете.
@burzhunet - англоязычное SEO.

Одним словом, мне такая адаптивность не нравилась 🙂 . Ведь на сайте все должно быть красиво!

Я перепробовал разные решения, и в итоге остановил свой выбор на следующем.

Этот способ простой, бесплатный и подходит для сайтов на любых движках.

В результате использования этого решения видеоролик выглядит так:

Видео получается полностью адаптивным и красиво смотрится на мобильных устройствах.

Я нашел в интернете статью доброго человека Ника Вогта How To Make a Responsive 100% Width YouTube iFrame Embed. Именно предложенный им код мне понравился больше всего. Другие решения либо не работали, либо код был громоздким.

На всякий случай приведу код Ника, если его блог перестанет работать в будущем.

Стандартный код вставки видео с YouTube сейчас выглядит так:

<iframe src="https://www.youtube.com/embed/LlGm2DIJ6MA" width="800" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Все, что нужно сделать, это окружить код YouTube слоем, и добавить класс в код видео:

<div class="container">
<iframe src="https://www.youtube.com/embed/LlGm2DIJ6MA" frameborder="0" allowfullscreen="allowfullscreen" class="video"></iframe>
</div>

Размеры видео можно убрать.

Для наглядности приведу картинку, на которой я зеленым выделил те моменты, которые нужно добавить к стандартному коду для вставки видеороликов с YouTube:

Далее в файл стилей style.css добавляем такой код:

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

Как вариант, можно class="video" в коде ролика не прописывать, а вместо этого добавить в CSS такой код:

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

Но этот вариант на моем блоге не работает должным образом.

Одним словом, нужно найти такое решение, которое подойдет вашему сайту. Я такое нашел, и поделился им в этой статье. Возможно, многим моим читателям данный способ тоже подойдет.

Можете посмотреть другие мои материалы:

Как повысить кликабельность сайта - Headline Optimizer

Кулак богомола – моя схема продвижения сайтов. Часть 1

3 типа ссылок, которые дают максимальный SEO эффект

Желаю вам плодотворного рабочего дня!

Михаил Шакин

Десерт на сегодня - видео про один день из жизни на Бали. Я вот только не увидел, где и когда работает главный герой 🙂 . Может, ему уже и не надо работать 😉 :