Налаштування видеообзорів в карточці товара у 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() або через D7 \Bitrix\Iblock\ElementPropertyTable:
$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/..." title="YouTube video"> блокує основний потік. Рішення: рендерити користувацьке превью через 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 KБ (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>
Це дає шанс потрапити в відео-карусель пошуку без сторонніх плагінів.