В современном веб-разработке важно, чтобы видео-контент отображался корректно на любых устройствах — от больших мониторов до смартфонов. В WordPress стандартный способ вставки видео через блоки или шорткоды часто приводит к тому, что видео не адаптируется по ширине и выходит за пределы контейнера, ухудшая пользовательский опыт.
Почему важно использовать адаптивное видео в WordPress
Адаптивное видео автоматически подстраивается под размер экрана пользователя, обеспечивая удобный просмотр без горизонтальной прокрутки или обрезания. Особенно это актуально для сайтов, где контент просматривают с мобильных устройств. Без адаптивности видео может выглядеть громоздко, размыто или ломать верстку страницы.
Кроме того, поисковые системы учитывают удобство пользователей (Core Web Vitals), и корректное отображение медиа влияет на SEO.
Методы вставки видео с адаптивным размером
Существует несколько способов добиться адаптивности видео в WordPress:
- Использование плагинов, которые автоматически оборачивают видео в адаптивный контейнер.
- Ручное добавление CSS для обертки видео.
- Использование кастомных шорткодов с поддержкой адаптивности.
Плагин FitVids для WordPress
Один из популярных плагинов — FitVids. Он автоматически находит все видео на странице и оборачивает их в адаптивный контейнер с помощью JavaScript.
Для установки:
- Перейдите в админку WordPress → Плагины → Добавить новый.
- Поиск по названию
FitVids for WordPress. - Установите и активируйте.
После активации плагин начнёт работать автоматически, и ваши видео станут адаптивными.
Ручное решение на CSS и JavaScript
Если вы не хотите использовать плагин, можно добавить адаптивность видео вручную. Основная идея — обернуть тег <iframe> или <video> в контейнер с соотношением сторон 16:9 (или другим), и задать CSS для масштабирования.
Добавьте в файл стилей темы или кастомный CSS:
.wplist-video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
overflow: hidden;
}
.wplist-video-wrapper iframe,
.wplist-video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}В шаблоне или в редакторе блоков оборачивайте видео так:
<div class="wplist-video-wrapper">
<iframe src="https://www.youtube.com/embed/ID_видео" frameborder="0" allowfullscreen></iframe>
</div>Этот метод универсален и не требует загрузки лишних плагинов.
Кастомный шорткод для адаптивного видео в WordPress (пример кода)
Для удобства можно создать собственный шорткод, который будет вставлять адаптивное видео по ID или URL.
Добавьте в functions.php вашей темы или в отдельный плагин следующий код:
function wplist_embed_responsive_video_shortcode($atts) {
$atts = shortcode_atts(array(
'url' => '',
'width' => '560',
'height' => '315'
), $atts, 'wplist_video');
if(empty($atts['url'])) {
return '<p>URL видео не указан.</p>';
}
$output = '<div class="wplist-video-wrapper">';
$output .= '<iframe src="' . esc_url($atts['url']) . '" width="' . intval($atts['width']) . '" height="' . intval($atts['height']) . '" frameborder="0" allowfullscreen></iframe>';
$output .= '</div>';
return $output;
}
add_shortcode('wplist_video', 'wplist_embed_responsive_video_shortcode');Использование в записи или странице:
[wplist_video url="https://www.youtube.com/embed/ID_видео"]Этот шорткод автоматически обернёт видео в адаптивный контейнер с CSS из предыдущего примера.
Советы по улучшению производительности и SEO при вставке видео
Ленивая загрузка видео (Lazy Load)
Видео — это тяжёлый контент, который замедляет загрузку страниц. Для улучшения скорости стоит использовать ленивую загрузку. WordPress с версии 5.5 поддерживает атрибут loading="lazy" для <iframe>. В нашем шорткоде можно добавить этот атрибут:
$output .= '<iframe loading="lazy" src="' . esc_url($atts['url']) . '" width="' . intval($atts['width']) . '" height="' . intval($atts['height']) . '" frameborder="0" allowfullscreen></iframe>';Использование плагина OmniVideo для интеграции видео
Если вы хотите расширенные возможности по вставке и управлению видео, обратите внимание на плагин OmniVideo. Он поддерживает адаптивность, ленивую загрузку, плейлисты, аналитику и многое другое.
Заключение
Адаптивное видео в WordPress — обязательный элемент современной веб-разработки. С помощью простого CSS, плагинов или кастомных шорткодов вы можете легко добиться корректного отображения видеоконтента на любых устройствах. Внедряйте ленивую загрузку и используйте проверенные инструменты, чтобы повысить скорость сайта и улучшить пользовательский опыт.