Как отключить автовоспроизведение видео в WordPress

Автовоспроизведение видео на сайте WordPress часто раздражает пользователей, увеличивает нагрузку на сервер и замедляет загрузку страниц. Особенно это актуально для сайтов с большим количеством видеоконтента или лендинг-пейджей. В этой статье разберём, как отключить автовоспроизведение видео в WordPress несколькими способами — с помощью плагинов и вручную через код.

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

Автовоспроизведение видео приводит к нескольким проблемам:

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

Поэтому разумно контролировать этот функционал и отключать автовоспроигрывание, если оно не нужно.

Отключение автовоспроизведения через плагины

Для большинства пользователей, кто не хочет вникать в код, есть несколько удобных плагинов для контроля видео на сайте.

Плагин Clearfy Pro для оптимизации видео

Плагин Clearfy Pro позволяет управлять множеством параметров сайта, включая видео. В его настройках можно отключить автовоспроизведение для встроенных видео и iframe с YouTube.

Настройка занимает пару минут и не требует знаний программирования. Clearfy Pro также поможет оптимизировать загрузку других медиафайлов на сайте.

Плагин WP Video Control

Существуют специализированные плагины, такие как WP Video Control, которые позволяют отключить автозапуск видео HTML5 и YouTube iframe. Их удобно использовать, если вы используете видео плееры без специальных настроек.

Настройка обычно сводится к включению опции «Disable Autoplay» в интерфейсе плагина.

Ручное отключение автовоспроизведения через код

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

Отключение автозапуска для HTML5 видео

По умолчанию тег <video> может иметь атрибут autoplay. Чтобы отключить автозапуск, нужно удалить этот атрибут через JavaScript.

function wpblogru_disable_autoplay_video() {
  if (is_admin()) return;
  ?>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var videos = document.querySelectorAll('video[autoplay]');
      videos.forEach(function(video) {
        video.pause();
        video.removeAttribute('autoplay');
      });
    });
  </script>
  <?php
}
add_action('wp_footer', 'wpblogru_disable_autoplay_video');

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

Отключение автозапуска YouTube видео в iframe

Для встроенных видео с YouTube автовоспроизведение задаётся параметром autoplay=1 в URL iframe.

Чтобы отключить его, можно фильтровать вывод контента и заменять URL с параметром.

function wpblogru_disable_youtube_autoplay($content) {
  return preg_replace('/(src="[^"]+)autoplay=1/', '$1autoplay=0', $content);
}
add_filter('the_content', 'wpblogru_disable_youtube_autoplay');

Этот фильтр ищет в содержимом страницы все iframe с параметром autoplay=1 и меняет его на autoplay=0, что отключает автовоспроигрывание.

Дополнительные советы по работе с видео в WordPress

Используйте ленивую загрузку видео

Чтобы ускорить загрузку страниц с видео, используйте ленивую загрузку (lazy load). Это значит, что видео будет загружаться только тогда, когда пользователь доскроллит страницу до него.

Для этого можно использовать плагин WPRemark с функцией lazy load для видео или настроить ленивую загрузку вручную с помощью JavaScript.

Контролируйте звук видео

Если вы не хотите отключать автовоспроизведение полностью, можно хотя бы отключить звук. Большинство современных браузеров позволяют автозапускать видео без звука.

function wpblogru_mute_autoplay_video() {
  if (is_admin()) return;
  ?>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var videos = document.querySelectorAll('video[autoplay]');
      videos.forEach(function(video) {
        video.muted = true;
      });
    });
  </script>
  <?php
}
add_action('wp_footer', 'wpblogru_mute_autoplay_video');

Этот код автоматически ставит видео на беззвучный режим при автовоспроизведении.

Проверяйте совместимость с плагинами кэширования

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