Настройка видеообзоров в карточке товара 1С-Битрикс
Карточка товара грузит YouTube-iframe, и только тогда пользователь понимает, что обзор вообще есть. Первый кадр не показан, плеер тормозит мобильный LCP на 2–4 секунды, а в «Яндекс.Метрике» видно, что 80% уходят до автовоспроизведения. Это не проблема видео — это проблема того, как Битрикс встраивает медиа в карточку.
Где хранится видео в инфоблоке
Битрикс не имеет нативного поля типа «видео» в стандартных типах свойств. Чаще всего видеообзор хранится в одном из трёх мест:
- Свойство типа
S(строка) с URL на YouTube/Vimeo — самый распространённый вариант - Свойство типа
F(файл) — прямая загрузка mp4 на сервер, таблицаb_iblock_element_property - Поле детального описания (HTML/TinyMCE) — видео зарыто в
b_iblock_element.DETAIL_TEXT
Для интернет-магазина на bitrix.catalog правильный путь — отдельное свойство с символьным кодом, например VIDEO_URL, привязанное к инфоблоку каталога. Запрос к нему через CIBlockElement::GetProperty() или через \Bitrix\Iblock\ElementPropertyTable (D7):
$props = \Bitrix\Iblock\ElementPropertyTable::getList([
'filter' => ['IBLOCK_ELEMENT_ID' => $elementId, 'CODE' => 'VIDEO_URL'],
'select' => ['VALUE'],
])->fetch();
Lazy-load превью вместо iframe
Главная проблема — <iframe src="https://www.youtube.com/embed/..."> блокирует основной поток. Решение: рендерить кастомное превью через thumbnail API YouTube (https://img.youtube.com/vi/{VIDEO_ID}/hqdefault.jpg) и подменять его на iframe только по клику.
В шаблоне компонента catalog.element (файл template.php) логика такая:
<?php if (!empty($arResult['PROPERTIES']['VIDEO_URL']['VALUE'])): ?>
<?php
$videoUrl = $arResult['PROPERTIES']['VIDEO_URL']['VALUE'];
preg_match('/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $videoUrl, $matches);
$videoId = $matches[1] ?? '';
?>
<div class="product-video" data-video-id="<?= htmlspecialchars($videoId) ?>">
<img src="https://img.youtube.com/vi/<?= $videoId ?>/hqdefault.jpg"
loading="lazy" alt="Видеообзор товара" class="video-preview">
<button class="video-play-btn" aria-label="Воспроизвести видео">▶</button>
</div>
<?php endif; ?>
JavaScript по клику заменяет div на iframe с autoplay=1. Это убирает лишний HTTP-запрос к YouTube при загрузке страницы и снижает вес страницы на 500–800 KB (YouTube загружает свой JS-бандл при любом iframe).
Кеширование и инвалидация
Шаблон catalog.element кешируется через CBitrixComponent::StartResultCache(). Если видео меняется в админке, кеш не сбрасывается автоматически — нужно либо прописать $this->AbortResultCache() при пустом VIDEO_URL, либо добавить тег кеша:
$GLOBALS['CACHE_MANAGER']->RegisterTag('iblock_id_' . $iblockId);
Тогда при сохранении элемента инфоблока (событие OnAfterIBlockElementUpdate) кеш сбрасывается корректно.
Видео в товарных вариациях (торговые предложения)
Если SKU-вариации (таблица b_catalog_product, тип P — предложение) имеют разные видео, нужно грузить свойство не родительского элемента, а конкретного предложения. Стандартный catalog.element этого не делает — он отдаёт свойства только основного товара. Решение: AJAX-запрос при смене SKU к кастомному экшну или компоненту, который возвращает VIDEO_URL для выбранного offerId.
В компоненте bitrix:catalog.element параметр OFFER_IBLOCK_ID указывает на инфоблок предложений — оттуда и нужно тянуть медиа-свойства.
Structured Data для видео
Google индексирует видео в карточке, если есть разметка VideoObject. Битрикс не генерирует её автоматически. Добавляется в шаблон вручную:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "<?= htmlspecialcharsEx($arResult['NAME']) ?>",
"thumbnailUrl": "https://img.youtube.com/vi/<?= $videoId ?>/hqdefault.jpg",
"uploadDate": "<?= date('Y-m-d') ?>",
"embedUrl": "https://www.youtube.com/embed/<?= $videoId ?>"
}
</script>
Это даёт шанс попасть в видео-карусель поиска без сторонних плагинов.