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

Автовоспроизведение видео на странице может раздражать пользователей и негативно влиять на производительность сайта. В WordPress, начиная с редактора Gutenberg, для вставки видео часто используется блок «Видео» или встроенные блоки с поддержкой видео с YouTube, Vimeo и других сервисов. В этой статье подробно разберём, как отключить автовоспроизведение видео в Gutenberg, используя как стандартные возможности, так и кастомные решения с помощью кода.

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

Автовоспроизведение видео:

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

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

Как отключить автовоспроизведение в стандартном блоке «Видео» Gutenberg

В редакторе Gutenberg, когда вы добавляете блок «Видео», в настройках блока нет стандартной опции для отключения автовоспроизведения, так как по умолчанию автозапуск не включён. Однако, если вы используете блок с видео из внешних источников (YouTube, Vimeo), иногда они сами запускают видео с автоплеем, если заданы соответствующие параметры в URL.

Чтобы контролировать автозапуск у таких видео, следует проверить URL видео и удалить из него параметр autoplay=1. Например, если вставлен YouTube блок с ссылкой вида:

https://www.youtube.com/embed/VIDEO_ID?autoplay=1

нужно убрать autoplay=1 или заменить на autoplay=0.

Редактирование URL вручную в Gutenberg

В блоке «Видеофайл» или «Встроенный» вы можете переключиться в режим редактирования HTML и отредактировать ссылку, убрав параметр автоплея.

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

Если на сайте часто используются вставки видео с автозапуском, можно добавить фильтр в functions.php вашей темы или в плагин, который будет автоматически удалять параметр autoplay=1 из URL видео.

function wpdemo_disable_video_autoplay( $html ) {
    // Убираем autoplay из iframe YouTube
    $html = preg_replace('/(autoplay=)1/', '$10', $html);
    return $html;
}
add_filter( 'embed_oembed_html', 'wpdemo_disable_video_autoplay', 10, 1 );

Этот код ищет в HTML вставки видео параметр autoplay=1 и заменяет на autoplay=0, тем самым отключая автовоспроизведение.

Как работает этот фильтр

Фильтр embed_oembed_html применяется ко всему HTML, который генерируется при вставке видео через oEmbed (например, YouTube, Vimeo). Это универсальное решение для отключения автозапуска.

Использование плагинов для управления видео в Gutenberg

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

• OmniVideo — мощный плагин для работы с видео, который позволяет контролировать автозапуск, громкость, повторы и многое другое прямо из редактора.
• YouTube Embed Plus — расширенный плагин для вставки видео YouTube с возможностью включения или отключения автозапуска.

Преимущество таких плагинов — удобный интерфейс настройки без необходимости писать код.

Кастомный блок Gutenberg с отключённым автозапуском видео

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

Пример простого блока с видео без автозапуска:

const { registerBlockType } = wp.blocks;
const { TextControl } = wp.components;

registerBlockType('wpdemo/video-no-autoplay', {
    title: 'Видео без автозапуска',
    icon: 'video-alt3',
    category: 'media',
    attributes: {
        url: { type: 'string' }
    },
    edit({ attributes, setAttributes }) {
        return (
            <TextControl
                label="URL видео"
                value={attributes.url}
                onChange={(url) => setAttributes({ url })}
                placeholder="Вставьте ссылку на видео"
            />
        );
    },
    save({ attributes }) {
        const src = attributes.url ? attributes.url.replace(/autoplay=1/, 'autoplay=0') : '';
        return (
            <video src={src} controls preload="metadata" />
        );
    }
});

Такой блок позволит вставлять видео с гарантированным отключённым автозапуском, управляя URL и убирая параметр autoplay=1.

Советы по оптимизации использования видео на сайте

Чтобы видео не замедляли сайт и не раздражали пользователей, соблюдайте несколько правил:

• Используйте формат mp4 или современные WebM для локальных видео — они загружаются быстрее.
• Для внешних видео отключайте автозапуск и включайте управление звуком.
• Добавляйте атрибут preload="metadata", чтобы загружались только метаданные видео, а не весь файл.
• Подумайте об использовании ленивой загрузки (lazy loading) для блоков с видео, например, с помощью плагина WPRemark или аналогичных.

Это улучшит UX и снизит нагрузку на сервер и браузер пользователя.