Integrating YouTube videos into 1C-Bitrix product cards

YouTube Video Integration in 1C-Bitrix Product Card

Product video review increases conversion — a practice confirmed by e-commerce projects data. Technically the task reduces to storing YouTube link in Bitrix product and correctly embedding player in card. There are more nuances than seem: page performance, mobile view, video content SEO, and gallery integration.

Storing Video Links

For storing YouTube links in products — infoblock property "String" type with code VIDEO_YOUTUBE. If one product can have multiple videos — multiple property.

Creation via API:

CIBlockProperty::Add([
    'IBLOCK_ID'    => CATALOG_IBLOCK_ID,
    'NAME'         => 'YouTube Video',
    'CODE'         => 'VIDEO_YOUTUBE',
    'PROPERTY_TYPE'=> 'S',
    'MULTIPLE'     => 'Y',
    'SORT'         => 200,
]);

Manager inserts full URL (https://www.youtube.com/watch?v=dQw4w9WgXcQ) or short (https://youtu.be/dQw4w9WgXcQ). Makes sense to store URL, not Video ID — easier to paste from browser without manual ID extraction.

Parsing Video ID and Generating Embed URL

Extract Video ID from URL to build embed-URL and 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,      // don't show similar videos at end
        'modestbranding' => 1,      // hide YouTube logo
        'enablejsapi'    => 1,      // for JavaScript control
    ];
    $query = http_build_query(array_merge($defaults, $params));
    return "https://www.youtube-nocookie.com/embed/{$videoId}?{$query}";
}

Domain youtube-nocookie.com — variant without YouTube cookie tracking, reduces GDPR impact and doesn't slow page load from third-party cookies.

Performance: Facade Pattern (Lazy Loading)

Direct <iframe> embedding blocks page loading — each iframe makes 10–15 third-party requests. With 3 videos in card this is critical.

Solution — Facade: show static YouTube thumbnail, player loads only on click.

<div class="yt-facade" data-video-id="dQw4w9WgXcQ">
    <img
        src="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg"
        alt="Product video review"
        loading="lazy"
        width="640" height="360"
    >
    <button class="yt-play-btn" aria-label="Play video"></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 available without API key via URL https://i.ytimg.com/vi/{VIDEO_ID}/hqdefault.jpg. Quality variants: mqdefault (320×180), hqdefault (480×360), maxresdefault (1280×720 — not always available).

Gallery Integration

If card has photo gallery (component with MORE_PHOTO), logically add video as first gallery element. For Fancybox or Swiper, video inserted as slide with data-type="iframe" attribute:

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="Video">';
        echo '<span class="play-icon"></span>';
        echo '</div>';
    }
}

SEO: VideoObject Micromarkup

For video indexing in Google add structured data VideoObject:

if ($videoId = parseYoutubeId($arResult['PROPERTIES']['VIDEO_YOUTUBE']['VALUE'][0] ?? '')) {
    $videoSchema = [
        '@context'     => 'https://schema.org',
        '@type'        => 'VideoObject',
        'name'         => $arResult['NAME'] . ' — video review',
        '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 (Optional)

For auto-getting video title and description — YouTube Data API v3. Request to https://www.googleapis.com/youtube/v3/videos?id={VIDEO_ID}&part=snippet&key={API_KEY} returns title, description, thumbnails. Rarely used — usually manager fills card description themselves.

Implementation Timeline