Как сделать адаптивное видео YouTube на сайте 2 способами

Последнее обновление - 1 декабря 2024 в 00:52

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

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

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

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

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

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

Способ первый — при помощи CSS

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

<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

1	<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Замените VIDEO_ID на идентификатор вашего видео.

Шаг 2. Добавьте следующий CSS-код в вашу тему:
Вы можете добавить этот CSS в раздел «Настроить» → «Дополнительные стили» или в файл стилей вашей дочерней темы:

.responsive-video {
  position: relative;
  padding-bottom: 56.25%; /* Соотношение 16:9 */
  height: 0;
  overflow: hidden;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.responsive-video {

position: relative;

padding-bottom: 56.25%; /* Соотношение 16:9 */

height: 0;

overflow: hidden;

}

.responsive-video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Шаг 3. Теперь необходимо поместить код видео между открывающим и закрывающим тегами div и задать класс:
Оберните ваш код iframe в div с классом responsive-video:

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

</div>

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

Теперь видео будет адаптивным и будет корректно отображаться на мобильных устройствах. Благодаря этому коду видео будет занимать полную ширину экрана и сохранит правильное соотношение сторон при изменении размера окна браузера или при просмотре на мобильных устройствах.

Способ второй — при помощи PHP

Можно использовать PHP для того, чтобы динамически генерировать адаптивное видео из YouTube на сайте WordPress. Ниже приведено примерное решение, которое можно внедрить в файл вашей темы. Например, в файл functions.php или в любой другой файл, где вы хотите отобразить видео.

Шаг 1. Создайте функцию для генерации HTML-кода:

function generate_responsive_youtube_video($video_id) {
    ob_start(); // Начинаем буферизацию вывода
    ?>
    <div class="responsive-video">
        <iframe src="https://www.youtube.com/embed/<?php echo esc_html($video_id); ?>" frameborder="0" allowfullscreen></iframe>
    </div>
    <?php
    return ob_get_clean(); // Возвращаем содержимое буфера
}

function generate_responsive_youtube_video($video_id) {

ob_start(); // Начинаем буферизацию вывода

</div>

<?php

return ob_get_clean(); // Возвращаем содержимое буфера

}

Шаг 2. Добавьте CSS для адаптивности:
В вашем CSS-файле добавьте следующий код, если он еще не добавлен:

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* Соотношение 16:9 */
    height: 0;
    overflow: hidden;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.responsive-video {

position: relative;

padding-bottom: 56.25%; /* Соотношение 16:9 */

height: 0;

overflow: hidden;

}

.responsive-video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Шаг 3. Используйте функцию в вашей теме или в постах:
Теперь вы можете использовать созданную функцию в любом месте вашей темы. Например, чтобы вывести видео в шаблоне или в посте:

echo generate_responsive_youtube_video('VIDEO_ID');

1	echo generate_responsive_youtube_video('VIDEO_ID');

Замените VIDEO_ID на реальный идентификатор вашего видео с YouTube.

Применение в Gutenberg

Если вы хотите использовать эту логику в редакторе Gutenberg, можно создать кастомный блок, используя подходящие плагины или создание своего собственного блока, однако это будет чуть сложнее.

Применение шорткода

Если вы хотите сделать это более универсальным способом, создайте шорткод для этой функции:

function youtube_video_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => ''
    ), $atts);

    return generate_responsive_youtube_video($atts['id']);
}
add_shortcode('youtube_video', 'youtube_video_shortcode');

function youtube_video_shortcode($atts) {

$atts = shortcode_atts(array(

'id' => ''

), $atts);

return generate_responsive_youtube_video($atts['id']);

}

add_shortcode('youtube_video', 'youtube_video_shortcode');

Теперь вы можете использовать шорткод в записи или на странице так:

[youtube_video id="VIDEO_ID"]

1	[youtube_video id="VIDEO_ID"]

Можно вставить код функции generate_responsive_youtube_video в запись блога WordPress, но для этого необходимо использовать шорткод. Вот как можно это сделать:

Шаг 1. Создание шорткода:
Добавьте следующий код в файл functions.php вашей темы (или в плагин, если вы используете пользовательский плагин):

function generate_responsive_youtube_video($atts) {
    // Извлекаем атрибуты шорткода
    $atts = shortcode_atts(array(
        'id' => ''
    ), $atts);
    
    $video_id = esc_html($atts['id']);
    
    ob_start(); // Начинаем буферизацию вывода
    ?>
    <div class="responsive-video">
        <iframe src="https://www.youtube.com/embed/<?php echo $video_id; ?>" frameborder="0" allowfullscreen></iframe>
    </div>
    <?php
    return ob_get_clean(); // Возвращаем содержимое буфера
}

// Регистрация шорткода
add_shortcode('youtube_video', 'generate_responsive_youtube_video');

function generate_responsive_youtube_video($atts) {

// Извлекаем атрибуты шорткода

$atts = shortcode_atts(array(

'id' => ''

), $atts);

$video_id = esc_html($atts['id']);

ob_start(); // Начинаем буферизацию вывода

</div>

<?php

return ob_get_clean(); // Возвращаем содержимое буфера

}

// Регистрация шорткода

add_shortcode('youtube_video', 'generate_responsive_youtube_video');

Шаг 2. Использование шорткода в записи блога:
Теперь вы можете использовать шорткод в любой записи или странице вашего блога. Просто вставьте его в редакторе постов:

[youtube_video id="VIDEO_ID"]

1	[youtube_video id="VIDEO_ID"]

Здесь надо заменить VIDEO_ID на реальный идентификатор видео с YouTube.

Шаг 3. Применение стилей CSS:
Не забудьте также добавить CSS-код для адаптивного видео, если вы еще этого не сделали:

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* Соотношение 16:9 */
    height: 0;
    overflow: hidden;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.responsive-video {

position: relative;

padding-bottom: 56.25%; /* Соотношение 16:9 */

height: 0;

overflow: hidden;

}

.responsive-video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Этот CSS можно добавить в файл стилей рабочей темы (style.css) или через панель настройки темы, если это поддерживается.

В результате, при использовании шорткода [youtube_video id=»VIDEO_ID»] в записях, видео будет отображаться адаптивно, и можно легко вставлять любой видосик с YouTube без изменения HTML-кода.

Всем WEB!

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

Способ первый — при помощи CSS

Способ второй — при помощи PHP

Применение в Gutenberg

Применение шорткода

Об авторе: Hobo

2 Comments

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

Способ первый — при помощи CSS

Способ второй — при помощи PHP

Применение в Gutenberg

Применение шорткода

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

Основы PHP

Структура изучения PHP

Об авторе: Hobo

2 Comments

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