пр. Мира 620000 Россия +7900-000-00-00
Логотип блога интернет-бродяги

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

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

Последнее бновение - 15 января 2023 в 16:50

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

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

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

Ролик 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, которая будет работать даже на слабеньком компьютере.

Про адаптивное прочитал здесь: Nick Vogt, Блог Михаила Шакина.

Всем WEB!

Друзья, плюсаните, вдруг пригодится!

Почитайте похожие материалы

Об авторе: Hobo

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

2 Comments

  1. Иван:

    Сегодня увидел, что видео ютуба на сайте криво стоит в мобильной версии. Спасибо за инструкцию, работает.

    1. Ну и отлично!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *