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

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

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

Автопроигрывание видео может привести к следующим проблемам:

• Увеличение времени загрузки страницы и расход трафика — видео начинают загружаться и воспроизводиться без запроса пользователя.
• Отвлечение внимания посетителей и ухудшение восприятия контента.
• Проблемы с доступностью для людей с ограничениями слуха или в определенных условиях использования.

Поэтому отключение автопроигрывания часто требуется как часть улучшения UX и оптимизации сайта.

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

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

Например, если видео вставлено так:

<video src="video.mp4" autoplay muted loop></video>

Достаточно удалить autoplay или контролировать вывод с помощью фильтра в теме:

function wppuzzle_remove_autoplay_from_video( $html ) {
    return str_replace( ' autoplay', '', $html );
}
add_filter( 'wp_video_shortcode', 'wppuzzle_remove_autoplay_from_video' );

Этот хук уберет атрибут autoplay из всех шорткодов видео WordPress.

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

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

Если же такой опции нет, можно использовать кастомный JS код, который отключит автозапуск после загрузки страницы. Например:

document.addEventListener('DOMContentLoaded', function() {
    const videos = document.querySelectorAll('video[autoplay]');
    videos.forEach(video => {
        video.pause();
        video.removeAttribute('autoplay');
    });
});

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

Особенности для YouTube и Vimeo

Если видео встраиваются с YouTube или Vimeo через iframe, автопроигрывание управляется параметрами URL.

• Для YouTube: параметр autoplay=1 запускает видео автоматически. Чтобы отключить автозапуск, уберите этот параметр или установите autoplay=0.
• Для Vimeo: параметр autoplay=1 аналогично запускает видео. Удалите или измените на 0.

Например, iframe без автозапуска для YouTube:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=0" allowfullscreen></iframe>

Если вы используете плагин для вставки YouTube или Vimeo, проверьте его настройки или фильтры, чтобы задать эти параметры.

Автоматическое отключение автопроигрывания с помощью фильтров темы

Можно добавить в файл functions.php вашей темы следующий код, чтобы автоматически отключать автопроигрывание для всех видео, встроенных через шорткод:

function wppuzzle_disable_video_autoplay( $html, $atts, $video, $post_id, $library ) {
    $html = preg_replace('/autoplay="?1"?/', '', $html);
    $html = str_replace('autoplay', '', $html);
    return $html;
}
add_filter( 'wp_video_shortcode', 'wppuzzle_disable_video_autoplay', 10, 5 );

Этот фильтр удалит все упоминания автопроигрывания из HTML кода видео.

Рекомендации по улучшению UX при работе с видео на WordPress

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

• Добавлять атрибут muted для видео, если автозапуск необходим (требование браузеров).
• Использовать статичные превью (постеры) для видео с кнопкой запуска.
• Оптимизировать видео по размеру для ускорения загрузки.
• Использовать lazy load для видео, чтобы загружать их по необходимости.

Для реализации lazy load в WordPress можно использовать плагин ABC Pagination, который поддерживает подгрузку контента по запросу, включая видео.

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

Создадим простой шорткод, который выводит видео без автозапуска и с кастомным постером:

function wppuzzle_video_shortcode_no_autoplay( $atts ) {
    $atts = shortcode_atts( array(
        'src' => '',
        'poster' => '',
        'width' => '640',
        'height' => '360',
    ), $atts, 'wppuzzle_video' );

    if ( empty( $atts['src'] ) ) {
        return '<!-- Видео не задано -->';
    }

    $video = '<video width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" controls poster="' . esc_url($atts['poster']) . '" preload="metadata">';
    $video .= '<source src="' . esc_url($atts['src']) . '" type="video/mp4">';
    $video .= 'Ваш браузер не поддерживает видео.';
    $video .= '</video>';

    return $video;
}
add_shortcode( 'wppuzzle_video', 'wppuzzle_video_shortcode_no_autoplay' );

Использование в контенте:

[wppuzzle_video src="https://example.com/video.mp4" poster="https://example.com/poster.jpg" width="800" height="450"]

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