Адаптивное видео YouTube на сайте

Последнее обновлене - 21 мая 2024 в 00:48

Чтобы сделать адаптивное видео YouTube на сайте, необходимо выполнить всего два несложных действия. А именно, оберуть код, предложенный самим ютубом для вставки на веб-страницу, в контейнер и добавить в файл стилей несколько строк.

Зачем вообще это нужно? Дело в том, что не все темы, установленные на сайт под управлением WordPress, могут корректно отобразить ролик YouTube в мобильной версии. При помощи смартфона такое видео очень неудобно просматривать, находясь на странице сайта, где оно размещено.

В чём это заключается? Часть активной области видеоизображения может срезаться, даже если оно не будет выходить за пределы контейнера страницы. Например, в этом блоге, если не адаптировать видео для мобильных устройств, ролик YouTube на странице в мобильной версии сайта выглядит следующим образом.

Согласитесь, что в таком виде ролик смотрится не очень. Пользователю придётся совершить дополнительные действия, чтобы досмотреть видео до конца — уйти со страницы сайта и завершить просмотр уже на сайте YouTube.

А вот так видео отображается в мобильной версии сайта, если выполнить действия, о которых речь пойдёт ниже.

Первым делом, скопируем с Ютуба обычный код для вставки видео на сайт. Код этот выглядит следующим образом:

<iframe width="560" height="315" src="https://www.youtube.com/embed/u_UzYrCbmMw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Теперь необходимо поместить код видео между открывающим и закрывающим тегами div и задать класс:

<div class="myvideo"><iframe src="https://www.youtube.com/embed/u_UzYrCbmMw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

Следующим шаг — файл style.css активной темы дополнить строками:

/* -------------------------------
Адаптируем видео под мобильные устройства
----------------------------------*/
.myvideo {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.myvideo iframe, .myvideo object, .myvideo embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

У меня сработал именно такой способ адаптации видео для мобильных устройств. Но есть ещё один. В этом случае, код видеоролика запишем так:

[php]<div class="myvideo"><iframe src="https://www.youtube.com/embed/u_UzYrCbmMw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="vidos"></iframe></div>[/php]

В iframe добавился класс «vidos». Тогда в файл style.css надо внести следующие строки:

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

Родительский блок становится адаптивным. Плейер приобретает абсолютное позиционирование и растягивается на всю ширину относительно блока. Если соотношение сторон ролика 16:9, то для класса myvideo выбираем padding-bottom: 56.25%. Если же соотношение сторон 4 к 3 (4:3), то padding-bottom: 75%.

Вот так, при помощи css, можно адаптировать любое видео YouTube на сайте для мобильных устройств. А чтобы своими руками создавать классные ролики для Ютуба, есть отличная программа Movavi, которая будет работать даже на слабеньком компьютере.

Всем WEB!