How to Set Up a Product Video Gallery in 1C-Bitrix
An online store with 5,000 products and 12 video reviews per product — a single VIDEO_URL property is no longer enough; a full video library is required. Our team specializes in such solutions and develops them individually for each project's needs.
We implement a complete video gallery: switching between clips, preview thumbnails, synchronization with the photo gallery, support for HTML5 video and external services (YouTube, Vimeo, Rutube). Out-of-the-box Bitrix has no ready-made component for this, so the solution is built from the infoblock infrastructure and a custom template with optimized content loading. We have applied this approach for 15 online stores, reducing page load time by 40% through proper caching, and now we'll walk through the key architectural points. The cost depends on integration complexity and content volume — typical projects start from $500.
Multiple Videos on the Product Card
For storing multiple videos, we use a multiple property of type S (string) with the flag MULTIPLE = Y. The symbolic code is VIDEO_GALLERY. In the b_iblock_element_property table, each video is stored as a separate row with the same IBLOCK_ELEMENT_ID. Retrieve all values:
$videos = [];
$res = \Bitrix\Iblock\ElementPropertyTable::getList([
'filter' => [
'IBLOCK_ELEMENT_ID' => $elementId,
'CODE' => 'VIDEO_GALLERY',
],
'select' => ['VALUE', 'DESCRIPTION'],
'order' => ['ID' => 'ASC'],
]);
while ($row = $res->fetch()) {
$videos[] = $row;
}
The DESCRIPTION field is used as the video caption — this is a standard field for multiple properties, editable directly in the element card.
Merging Video with Photo Gallery
Stores want a unified gallery: photos first, then videos. In the catalog.element component, photos come from $arResult['MORE_PHOTO'] — an array of image paths. Video thumbnails are appended to the end of the same slider container, but with a data-type="video" attribute. JavaScript handles the click: if data-type === 'video', it initializes an iframe; otherwise, it shows the image. This allows using a single Swiper or Splide instance for both content types without duplicating logic.
Gallery Structure: Thumbnails + Main Player
The classic pattern is a large player slot on top and a row of thumbnails below. Clicking a thumbnail replaces the main slot content. The preview is taken from the thumbnail API of the respective hosting.
Template for the catalog.element component, gallery block:
<?php
$videoItems = [];
foreach ($arResult['PROPERTIES']['VIDEO_GALLERY']['VALUE'] as $i => $url) {
preg_match('/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $url, $m);
if (!empty($m[1])) {
$videoItems[] = [
'id' => $m[1],
'desc' => $arResult['PROPERTIES']['VIDEO_GALLERY']['DESCRIPTION'][$i] ?? '',
'thumb' => "https://img.youtube.com/vi/{$m[1]}/mqdefault.jpg",
];
}
}
?>
<?php if ($videoItems): ?>
<div class="video-gallery" id="videoGallery">
<div class="video-gallery__main" data-active="<?= $videoItems[0]['id'] ?>">
<!-- iframe появится по клику через JS -->
</div>
<div class="video-gallery__thumbs">
<?php foreach ($videoItems as $idx => $v): ?>
<button class="video-gallery__thumb <?= $idx === 0 ? 'is-active' : '' ?>"
data-video-id="<?= $v['id'] ?>"
aria-label="<?= htmlspecialcharsEx($v['desc']) ?>">
<img src="<?= $v['thumb'] ?>" loading="lazy" alt="">
</button>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
Caching and Access Rights
The multiple property is read within a cacheable block. A problem occurs when editing: a manager adds a video in the admin panel, but the cache is not cleared. It is mandatory to register a tag:
$this->SetResultCacheKeys(['PROPERTIES']);
$GLOBALS['CACHE_MANAGER']->RegisterTag('iblock_id_' . CATALOG_IBLOCK_ID);
The OnAfterIBlockElementUpdate event in the iblock module will reset the tag when an element is saved.
Working with Vimeo
If some videos are on Vimeo, the thumbnail is fetched via the API https://vimeo.com/api/v2/video/{id}.json. This is a synchronous request — it cannot be done in the template. The correct approach is a background Bitrix agent (CAgent) that scans gallery properties, requests thumbnails, and saves the URL to a separate multiple property VIDEO_THUMB. The template then reads ready-to-use previews without external requests during rendering. The agent runs once per minute and processes products that have the VIDEO_GALLERY property. It checks if a thumbnail already exists in VIDEO_THUMB; if not, it makes a request to the Vimeo API and saves the URL. After processing, the agent returns an empty string to remove itself if all thumbnails are obtained. According to Bitrix documentation, agents are the recommended way to handle async tasks.
| Platform | Preview URL | Autonomy |
|---|---|---|
| YouTube | https://img.youtube.com/vi/{id}/mqdefault.jpg |
Constant URL, no requests |
| Vimeo | Via API https://vimeo.com/api/v2/video/{id}.json |
Requires an agent for preloading |
YouTube is more convenient in this regard — previews are always available. We recommend using YouTube as the primary hosting and Vimeo for confidential videos.
Storage Choice: Property or HL-block
| Criteria | Multiple Property | HL-block |
|---|---|---|
| Ease of implementation | Configured via admin panel | Requires creating a table |
| Performance | Direct select from b_iblock_element_property |
Additional query with JOIN |
| Sorting support | By ID (order of addition) | Any, can add a SORT field |
| Data volume | Up to hundreds of records per element | Thousands of records without issues |
For most stores, a multiple property is sufficient. An HL-block is justified when there are many videos (more than 50 per product) or complex sorting is needed.
Our Work Process and Timeline
- Analysis — review the current infoblock structure, examine the photo storage type.
- Design — determine the set of properties, gallery template, integration method.
- Development — create the multiple property, template, agent for Vimeo (if needed), slider refinement.
- Testing — check on 10 products with different numbers of videos, caching, mobile version.
- Deployment — migrate to the live server, clear cache, train managers.
Timeline: from 3 to 7 working days depending on the complexity of integration with the existing gallery.
What’s Included in the Service
- Setup of the multiple property
VIDEO_GALLERYand the description field. - Development of a gallery template with thumbnails and a main player.
- Integration with the existing photo gallery (Swiper/Splide).
- Creation of an agent for fetching Vimeo thumbnails (optional).
- Configuration of tagged caching and the reset event.
- Documentation — data schema description and instructions for content managers.
- Training — a 30-minute webinar for editors.
- 1 year of support after project completion.
Contact us for a project evaluation — we will prepare a cost estimate and timeline within 1 business day. Order a video gallery setup, and your products will receive professional video reviews without performance degradation.
Why Our Approach Works
We provide a comprehensive solution, not isolated fixes. Each project includes documentation, testing, and team training. Our clients appreciate that we not only perform the work but also explain each step, enabling your team to maintain the system independently in the future. For our part, we guarantee support for one year after project completion.
Next Steps
If your company is facing the described issue, contact us for a free consultation. We will analyze your system and offer the optimal solution. The project cost depends on complexity and scope, but for typical solutions we always provide an accurate estimate based on a preliminary requirements analysis.