Как отключить автопроигрывание в видео блоках Gutenberg в WordPress

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

Почему важно отключать автопроигрывание видео в Gutenberg

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

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

Как отключить автопроигрывание в стандартном видео блоке Gutenberg

По умолчанию блок «Видео» в Gutenberg не включает автопроигрывание, но если вы вставляете видео через HTML-блок или кастомный блок с тегом <video>, то атрибут autoplay может быть установлен.

Чтобы отключить автопроигрывание, нужно проверить HTML-код блока и убрать атрибут autoplay или установить его в false. В Gutenberg это можно сделать через режим редактирования кода:

<video src="video.mp4" controls playsinline></video>

Если вы используете плеер из сторонних источников, например YouTube, блок «Видео» вставляет iframe с параметрами. Для YouTube параметр autoplay=1 запускает видео автоматически.

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

Пример кода для кастомного блока с отключенным автопроигрыванием

Если вы создаете собственный блок видео или вставляете видео через PHP-шаблон, можно прописать функцию с префиксом wpone_disable_autoplay_video:

function wpone_disable_autoplay_video($html) {
    // Убираем autoplay из тега video
    $html = preg_replace('/autoplay="?1"?/i', '', $html);
    // Убираем autoplay из iframe YouTube
    $html = preg_replace('/autoplay=1/', 'autoplay=0', $html);
    return $html;
}
add_filter('embed_oembed_html', 'wpone_disable_autoplay_video');

Этот фильтр поможет отключить автопроигрывание для встроенных видео при использовании стандартных средств WordPress.

Плагины для управления автопроигрыванием видео в WordPress

Если вы не хотите вникать в код, есть несколько плагинов, которые помогут управлять поведением видео:

Video Block Control — позволяет в настройках блоков Gutenberg отключать автопроигрывание и другие параметры.
Clearfy Pro — в этом плагине есть опция оптимизации работы видео, включая отключение автозапуска.
WPStories — если используете видео в сторис, плагин позволяет тонко настроить поведение воспроизведения.

Использование плагина из WPSHOP гарантирует совместимость и поддержку.

Дополнительные рекомендации по улучшению UX с видео

Для улучшения пользовательского опыта стоит также учитывать следующие моменты:

Добавляйте атрибут muted для видео, чтобы при необходимости можно было разрешить автозапуск без звука.
Используйте атрибут playsinline, чтобы видео воспроизводилось внутри страницы на мобильных устройствах, а не в полноэкранном режиме.
Реализуйте кнопку play/pause с помощью JavaScript для управления видео через UI.

Пример JavaScript-кода для управления видео в Gutenberg

document.addEventListener('DOMContentLoaded', function() {
  const videos = document.querySelectorAll('video');
  videos.forEach(video => {
    video.autoplay = false;
    video.pause();
    // Добавим кастомную кнопку play
    const btn = document.createElement('button');
    btn.textContent = 'Play';
    btn.addEventListener('click', () => {
      if(video.paused) {
        video.play();
        btn.textContent = 'Pause';
      } else {
        video.pause();
        btn.textContent = 'Play';
      }
    });
    video.parentNode.insertBefore(btn, video.nextSibling);
  });
});

Этот простой скрипт отключит автопроигрывание и добавит кнопку управления для каждого видео на странице.

Выводы и рекомендации для разработчиков

Отключение автопроигрывания видео в Gutenberg — важный шаг для улучшения UX и оптимизации загрузки страниц. Используйте предложенные методы в зависимости от вашего уровня владения кодом и специфики сайта. Для большинства пользователей достаточно убрать параметр autoplay в настройках блока или применить фильтр embed_oembed_html.

Для более сложных сценариев — кастомные блоки и JavaScript позволят гибко управлять видео. Рекомендуем также обратить внимание на плагины из WPSHOP, которые упрощают настройку и расширяют функционал.