Інтеграція 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,
]);

Менеджер вставляє повне посилання (https://www.youtube.com/watch?v=dQw4w9WgXcQ) або скорочене (https://youtu.be/dQw4w9WgXcQ). Зберігати має сенс саме посилання, а не Video ID — простіше вставляти з браузера без виділення ID вручну.

Парсинг Video ID та генерація embed-посилання

З посилання потрібно витягти Video ID для побудови embed-URL та мініатюри:

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 — варіант без cookie-трекінгу YouTube, знижує вплив на GDPR та не сповільнює завантаження з-за відсутності сторонніх cookie.

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

Пряме вбудовування <iframe title="Embedded content"> для кожного відео блокує завантаження сторінки — кожен iframe робить 10–15 сторонніх запитів. При 3 відео в карточці це критично.

Рішення — Facade: показуємо статичну мініатюру 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);
    });
});

Мініатюра доступна без API-ключа за посиланням 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. Використовується рідко — зазвичай менеджер сам заповнює опис у карточці товара.

Строки реалізації