Как отключить автозапуск видео в Gutenberg в теме WordPress

Диагностика проблемы: почему видео в Gutenberg запускаются автоматически

Если в блоке видео Gutenberg при загрузке страницы вы замечаете, что видео начинают воспроизводиться автоматически, это может мешать удобству пользователей и увеличивать нагрузку на сервер и трафик. Автозапуск видео часто происходит из-за параметров HTML5 video или YouTube embed, либо из-за того, что тема или плагины добавляют соответствующие атрибуты.

Чтобы проверить, действительно ли видео имеют атрибут autoplay, откройте страницу с видео, нажмите правой кнопкой мыши и выберите «Просмотреть код» или «Inspect». Найдите элемент <video> или <iframe> с видео и проверьте, есть ли у них атрибут autoplay или параметр URL autoplay=1.

Пошаговое решение: отключение автозапуска видео в Gutenberg

1. Отключаем автозапуск для встроенных видео YouTube и Vimeo

Часто Gutenberg использует блок "Видео" или "Встраиваемый код", который генерирует iframe с параметром autoplay=1. Чтобы убрать автозапуск, нужно перехватить вывод блока и удалить этот параметр.

add_filter('render_block', function($block_content, $block) {
    if ($block['blockName'] === 'core-embed/youtube' || $block['blockName'] === 'core-embed/vimeo') {
        $block_content = preg_replace('/autoplay=1/', 'autoplay=0', $block_content);
    }
    return $block_content;
}, 10, 2);

2. Отключаем автозапуск для видео HTML5 блока <video>

Если в Gutenberg используется нативный видео-блок с тегом <video>, нужно удалить атрибут autoplay из разметки. Для этого можно воспользоваться тем же фильтром render_block:

add_filter('render_block', function($block_content, $block) {
    if ($block['blockName'] === 'core/video') {
        $block_content = preg_replace('/autoplay="?autoplay"?/', '', $block_content);
    }
    return $block_content;
}, 10, 2);

3. Оптимизация: отключаем автозапуск видео через JavaScript

Если вышеуказанные методы не сработали из-за кеша или особенностей темы, можно принудительно остановить все видео с автозапуском с помощью JS. Добавьте в вашу тему следующий скрипт:

add_action('wp_footer', function() {
    echo "<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('video[autoplay]').forEach(function(video) {
            video.pause();
            video.removeAttribute('autoplay');
        });
        document.querySelectorAll('iframe').forEach(function(iframe) {
            if (iframe.src.includes('autoplay=1')) {
                iframe.src = iframe.src.replace('autoplay=1', 'autoplay=0');
            }
        });
    });
    </script>";
});

Проверка результата после внедрения

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

• Видео не запускаются автоматически при загрузке страницы.
• В исходном коде страницы у видео-блоков отсутствует атрибут autoplay и в URL iframe нет autoplay=1.
• Проверьте на нескольких браузерах и мобильных устройствах, чтобы убедиться в кроссбраузерности.

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

Частые ошибки и как их исправить

• Кэширование не обновлено. После изменений очистите все кеши (плагины, сервер, CDN), иначе изменения не применятся.
• Другие плагины или тема переопределяют видео-блоки. Проверьте, нет ли конфликтов с плагинами для видео или кастомными скриптами, которые добавляют автозапуск.
• Неправильный фильтр. Фильтр render_block срабатывает только для Gutenberg-блоков. Если видео вставлено вручную в редактор классическим способом, фильтр не сработает.
• Отсутствие HTTPS в iframe src. Некоторые браузеры блокируют управление iframe без HTTPS, что мешает JS менять параметры.

Практические советы по безопасности и производительности

• Избегайте автозапуска видео, чтобы не ухудшать UX и не тратить лишний трафик посетителей.
• Используйте ленивую загрузку (loading="lazy") для видео, если поддерживается, чтобы ускорить загрузку страниц.
• Проверяйте, чтобы сторонние видео не использовали устаревшие протоколы и не увеличивали время загрузки.

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