Интеграция YouTube-видео в карточку товара 1С-Битрикс

Интеграция YouTube-видео в карточку товара 1С-Битрикс

Видеообзор товара увеличивает конверсию — это практика, подтверждённая данными большинства e-commerce проектов. Технически задача сводится к хранению ссылки YouTube у товара в Битрикс и корректному встраиванию плеера в карточку. Нюансов больше, чем кажется: производительность страницы, мобильный вид, SEO видеоконтента и интеграция с галереей фотографий.

Хранение ссылок на видео

Для хранения YouTube-ссылок у товаров — свойство инфоблока типа «Строка» с кодом VIDEO_YOUTUBE. Если у одного товара может быть несколько видео — множественное свойство.

Создание через API:

CIBlockProperty::Add([
    'IBLOCK_ID'    => CATALOG_IBLOCK_ID,
    'NAME'         => 'YouTube-видео',
    'CODE'         => 'VIDEO_YOUTUBE',
    'PROPERTY_TYPE'=> 'S',
    'MULTIPLE'     => 'Y',
    'SORT'         => 200,
]);

Менеджер вставляет полный URL (https://www.youtube.com/watch?v=dQw4w9WgXcQ) или сокращённый (https://youtu.be/dQw4w9WgXcQ). Хранить имеет смысл именно URL, а не Video ID — проще вставлять из браузера без выделения ID вручную.

Парсинг Video ID и генерация embed-ссылки

Из URL нужно извлечь Video ID для построения embed-URL и thumbnail:

function parseYoutubeId(string $url): ?string
{
    $patterns = [
        '/(?:v=|\/embed\/|\/shorts\/|youtu\.be\/)([a-zA-Z0-9_-]{11})/',
    ];

    foreach ($patterns as $pattern) {
        if (preg_match($pattern, $url, $m)) {
            return $m[1];
        }
    }
    return null;
}

function getYoutubeEmbedUrl(string $videoId, array $params = []): string
{
    $defaults = [
        'rel'            => 0,      // не показывать похожие видео в конце
        'modestbranding' => 1,      // скрыть логотип YouTube
        'enablejsapi'    => 1,      // для управления из JavaScript
    ];
    $query = http_build_query(array_merge($defaults, $params));
    return "https://www.youtube-nocookie.com/embed/{$videoId}?{$query}";
}

Домен youtube-nocookie.com — вариант без куки-трекинга YouTube, снижает влияние на GDPR и не замедляет загрузку из-за отсутствия сторонних куки.

Производительность: Facade-паттерн (ленивая загрузка)

Прямое встраивание <iframe> для каждого видео блокирует загрузку страницы — каждый iframe делает 10–15 сторонних запросов. При 3 видео в карточке это критично.

Решение — Facade: показываем статичный thumbnail YouTube, плеер загружается только по клику.

<div class="yt-facade" data-video-id="dQw4w9WgXcQ">
    <img
        src="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg"
        alt="Видеообзор товара"
        loading="lazy"
        width="640" height="360"
    >
    <button class="yt-play-btn" aria-label="Воспроизвести видео"></button>
</div>

document.querySelectorAll('.yt-facade').forEach(function(facade) {
    facade.addEventListener('click', function() {
        const videoId = this.dataset.videoId;
        const iframe = document.createElement('iframe');
        iframe.src = 'https://www.youtube-nocookie.com/embed/'
            + videoId + '?autoplay=1&rel=0&modestbranding=1';
        iframe.allow = 'autoplay; encrypted-media';
        iframe.allowFullscreen = true;
        iframe.width  = '640';
        iframe.height = '360';
        this.replaceWith(iframe);
    });
});

Thumbnail доступен без API-ключа по URL https://i.ytimg.com/vi/{VIDEO_ID}/hqdefault.jpg. Варианты качества: mqdefault (320×180), hqdefault (480×360), maxresdefault (1280×720 — не всегда доступен).

Интеграция с галереей

Если в карточке есть галерея фотографий (компонент с MORE_PHOTO), видео логично добавить как первый элемент галереи. Для Fancybox или Swiper видео вставляется как слайд с атрибутом data-type="iframe":

if (!empty($arResult['PROPERTIES']['VIDEO_YOUTUBE']['VALUE'])) {
    foreach ((array)$arResult['PROPERTIES']['VIDEO_YOUTUBE']['VALUE'] as $ytUrl) {
        $videoId = parseYoutubeId($ytUrl);
        if (!$videoId) continue;

        $thumbUrl = "https://i.ytimg.com/vi/{$videoId}/hqdefault.jpg";
        $embedUrl = getYoutubeEmbedUrl($videoId, ['autoplay' => 1]);

        echo '<div class="gallery-item gallery-video"
                  data-fancybox="product-gallery"
                  data-src="' . htmlspecialchars($embedUrl) . '"
                  data-type="iframe">';
        echo '<img src="' . $thumbUrl . '" alt="Видео">';
        echo '<span class="play-icon"></span>';
        echo '</div>';
    }
}

SEO: VideoObject микроразметка

Для индексации видео в Google добавляем структурированные данные VideoObject:

if ($videoId = parseYoutubeId($arResult['PROPERTIES']['VIDEO_YOUTUBE']['VALUE'][0] ?? '')) {
    $videoSchema = [
        '@context'     => 'https://schema.org',
        '@type'        => 'VideoObject',
        'name'         => $arResult['NAME'] . ' — видеообзор',
        'description'  => strip_tags($arResult['PREVIEW_TEXT']),
        'thumbnailUrl' => "https://i.ytimg.com/vi/{$videoId}/hqdefault.jpg",
        'embedUrl'     => "https://www.youtube.com/embed/{$videoId}",
        'uploadDate'   => date('c'),
    ];
    echo '<script type="application/ld+json">'
       . json_encode($videoSchema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)
       . '</script>';
}

YouTube Data API v3 (опционально)

Если нужно автоматически получать название и описание видео — YouTube Data API v3. Запрос к https://www.googleapis.com/youtube/v3/videos?id={VIDEO_ID}&part=snippet&key={API_KEY} возвращает title, description, thumbnails. Используется редко — обычно менеджер сам заполняет описание в карточке товара.

Сроки реализации