Как добавить видео в описание товара WooCommerce без плагинов

Проблема: необходимость добавить видео в описание товара WooCommerce

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

Диагностика проблемы

Перед тем как внедрять видео, проверьте, как сейчас добавляется видео в описание товара:

• Видео вставляется через oEmbed (например, YouTube ссылка) — проверьте, корректно ли выводится и адаптивно ли масштабируется.
• Видео вставляется через HTML-код <video> — часто при этом не учитывается адаптивность и мобильная поддержка.
• Видео не отображается из-за отключённого автоплея, проблем с SSL или CSP (Content Security Policy).

Проверьте консоль браузера (F12 > Console) на наличие ошибок, связанных с видео. Если видео не загружается или не отображается, возможно, стоит добавить атрибуты или изменить способ вставки.

Пошаговое решение: как добавить адаптивное видео в описание товара без плагинов

1. Использование oEmbed для YouTube и Vimeo

WooCommerce по умолчанию поддерживает oEmbed. Просто вставьте ссылку на видео в визуальный редактор описания товара, и видео автоматически отобразится.

Чтобы сделать видео адаптивным, добавьте в файл functions.php вашей темы следующий код:

function wpvideo_oembed_responsive($html, $url, $attr, $post_ID) {
    return '<div class="wpvideo-responsive-video">' . $html . '</div>';
}
add_filter('embed_oembed_html', 'wpvideo_oembed_responsive', 10, 4);

Добавьте в style.css вашей темы стили для адаптивности:

.wpvideo-responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.wpvideo-responsive-video iframe,
.wpvideo-responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

2. Вставка локального видео через HTML5 <video>

Если вы хотите добавить своё видеофайл, загрузите его в медиабиблиотеку и вставьте HTML-код в описание:

<video controls preload="metadata" poster="URL_миниатюры" style="max-width:100%; height:auto;">
  <source src="URL_видео.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>

Обязательно добавьте атрибут style="max-width:100%; height:auto;" для адаптивности.

3. Автоматизация добавления видео в описание товара через пользовательское поле

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

add_action('woocommerce_single_product_summary', 'wpvideo_add_video_to_product_description', 25);
function wpvideo_add_video_to_product_description() {
    $video_url = get_post_meta(get_the_ID(), '_wpvideo_url', true);
    if ($video_url) {
        echo '<div class="wpvideo-responsive-video">' . wp_oembed_get($video_url) . '</div>';
    }
}

Добавьте видео URL в пользовательское поле _wpvideo_url через админку товара.

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

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

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

• Видео не отображается: проверьте, что ссылка на видео корректна и доступна, а также что URL начинается с https.
• Видео не адаптивно: не забывайте про CSS стили обёртки с position: relative и padding-bottom.
• Автозапуск не работает на мобильных: современные браузеры блокируют автозапуск без звука. Добавьте атрибуты muted autoplay playsinline, если это необходимо, но учитывайте UX.
• Видео не загружается из-за CSP: проверьте настройки Content Security Policy сервера, разрешите домены видео-хостинга.

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

• Всегда используйте HTTPS для видео-ссылок, чтобы избежать смешанного контента.
• Минимизируйте размер локальных видео, используйте форматы WebM и MP4 для оптимальной совместимости.
• Не загружайте видео напрямую в описания без адаптивной обёртки — это ухудшает UX на мобильных.
• Если вы используете oEmbed, кэшируйте результаты с помощью плагинов кеширования или transient API, чтобы снизить нагрузку.
• Разрешайте загрузку видео только из проверенных источников, чтобы избежать XSS-уязвимостей.

Сравнение способов добавления видео в WooCommerce описание товара