Setting up a video gallery on 1C-Bitrix

Video Gallery Setup on 1C-Bitrix

Video on a site is either external links (YouTube, Vimeo) or own files hosted on server or CDN. In either case, Bitrix doesn't provide ready "video gallery" solution — you'll assemble from infoblock components plus customize template.

Video Gallery Infoblock Structure

Standard approach: create infoblock of type Video Gallery with property set. Minimal property set for video element:

• VIDEO_URL — type String, for YouTube/Vimeo link
• VIDEO_FILE — type File, for uploaded video files (mp4)
• PREVIEW_IMAGE — type File, preview image (or use standard element PREVIEW_PICTURE)
• DURATION — type String, video duration
• VIDEO_TYPE — type List, values: youtube, vimeo, local

Structure is stored in b_iblock_element and b_iblock_element_prop_s{iblock_id} (string properties) / b_iblock_element_prop_m{iblock_id} (multiple) tables. Fix infoblock ID in constant or b_option, not hardcode in every component.

Display Component: list + detail

For video list use bitrix:news.list or bitrix:catalog (if video is part of catalog). Call component with filtration parameters by type (FILTER), sorting, and pagination.

In list's template.php generate card for each element with preview and play button. If VIDEO_TYPE = youtube, extract video ID from URL like https://www.youtube.com/watch?v=XXXXXXXXXXX and form preview via https://img.youtube.com/vi/{ID}/maxresdefault.jpg — saves manual preview upload.

For detailed view — bitrix:news.detail component. In template check video type and render appropriate player:

if ($arResult["PROPERTIES"]["VIDEO_TYPE"]["VALUE"] === "youtube") {
    $videoId = extractYoutubeId($arResult["PROPERTIES"]["VIDEO_URL"]["VALUE"]);
    echo '<iframe src="https://www.youtube.com/embed/' . $videoId . '?autoplay=1" ...></iframe>';
} elseif ($arResult["PROPERTIES"]["VIDEO_TYPE"]["VALUE"] === "local") {
    $fileUrl = CFile::GetPath($arResult["PROPERTIES"]["VIDEO_FILE"]["VALUE"]);
    echo '<video src="' . $fileUrl . '" controls></video>';
}

Loading Local Video Files

Upload via standard Bitrix file manager works but has limits: upload_max_filesize and post_max_size in php.ini restrict size. For files > 100 MB either raise limits or upload via FTP with later binding via CFile::RegisterFile().

Storing video on same server as website is poor practice for large volumes. bitrix:clouds module allows S3-compatible storage (Yandex Cloud, Mail.ru Cloud, etc.). After setup all uploaded files automatically go to cloud, DB stores path.

Lazy Loading and Performance

Video is heavy content. For gallery with previews use loading="lazy" for preview <img>, don't embed players immediately — render <div> with preview and load <iframe> only on click:

document.querySelectorAll('.video-preview').forEach(el => {
    el.addEventListener('click', function() {
        this.innerHTML = '<iframe src="' + this.dataset.videoUrl + '?autoplay=1" ...></iframe>';
    });
});

Critical for 20+ video gallery — without this approach page makes 20+ YouTube requests on load, killing performance and possibly triggering YouTube blocking for embedded player limit excess.

Component bitrix:news.list caching with 3600 second TTL is justified for video gallery — content updates rarely. Check that new video addition via admin clears cache: by default CIBlockElement::Add() calls BXClearCache for corresponding infoblock.