You load 50 training videos onto your site — and the page starts loading for 15 seconds. YouTube players block each other, the server chokes on 500 MB of media files. Familiar? Standard 1C-Bitrix tools don't include a ready-made video gallery — you have to piece together a solution from infoblock components, customize templates, and optimize loading. With over 10 years of experience and 50+ video gallery projects, our team has implemented these solutions. 12-month warranty. In this article, we'll cover how to design an infoblock, choose storage type, implement lazy loading, and achieve page load times under 2 seconds even with 20+ videos. Lazy loading reduces load time by 40% compared to the traditional approach, and correct video storage reduces server load by 3–5 times. Setup cost ranges from $500 to $2000 depending on complexity.
How to create an infoblock for a video gallery?
The standard approach: create an infoblock of type Video gallery with a set of properties. Minimum properties for a video element:
-
VIDEO_URL— String type, for YouTube/Vimeo link -
VIDEO_FILE— File type, for uploaded video files (mp4) -
PREVIEW_IMAGE— File type, preview image (or use the standardPREVIEW_PICTUREof the element) -
DURATION— String type, video duration -
VIDEO_TYPE— List type, values:youtube,vimeo,local
The structure is stored in tables b_iblock_element and b_iblock_element_prop_s{iblock_id} (string properties) / b_iblock_element_prop_m{iblock_id} (multiple properties). Store the infoblock ID in a constant or in b_option, don't hardcode it in every component.
List + detail component
For the video list, use bitrix:news.list or bitrix:catalog (if videos are part of a catalog). Call the component with filtering parameters (FILTER), sorting, and pagination. 1C-Bitrix documentation for component 2.0 describes all parameters.
In the template.php of the list, generate a card for each element with preview and play button. If VIDEO_TYPE = youtube, extract the video ID from the YouTube URL and form a preview via https://img.youtube.com/vi/{ID}/maxresdefault.jpg — this eliminates the need to manually upload previews.
For detail view — bitrix:news.detail component. In the template, check the video type and render the 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" ... title="YouTube video"></iframe>';
} elseif ($arResult["PROPERTIES"]["VIDEO_TYPE"]["VALUE"] === "local") {
$fileUrl = CFile::GetPath($arResult["PROPERTIES"]["VIDEO_FILE"]["VALUE"]);
echo '<video src="' . $fileUrl . '" controls></video>';
}
Uploading local video files: problems and solutions
Uploading videos through Bitrix's standard file manager works but has limitations: upload_max_filesize and post_max_size in php.ini restrict size. For files > 100 MB, either raise limits or use FTP upload with subsequent attachment via CFile::RegisterFile(). This method bypasses PHP limits but requires manual processing. More about FTP setup
Configure FTP access to the server, upload files to /upload/video/, then attach to the infoblock element by calling CFile::RegisterFile() with the file path.
Storing videos on the same server as the website is bad practice for large volumes. The bitrix:clouds module allows you to configure file storage in an S3-compatible storage (Yandex Cloud, Mail.ru Cloud, etc.). After setup, all uploaded files automatically go to the cloud, and the database stores the path. Using S3 reduces server load by 3–5 times and improves response time for users from different regions. Savings on hosting due to cloud storage can reach 40%. For a bitrix video gallery setup, using the clouds module in bitrix for s3 video storage is recommended.
What to choose: YouTube or local storage?
| Criterion | YouTube | Local storage | S3 cloud |
|---|---|---|---|
| Server load | Minimal | High (I/O) | Low |
| Load speed | 1–3 s | 2–10 s (depends on server) | 1–2 s |
| Cost | Free | Disk costs | from 0.5 ₽/GB |
| Control | Low (dependent on YouTube) | Full | Full |
YouTube integration saves space and traffic, but you depend on a third-party service. Local storage gives full control but requires a powerful server. S3 is the sweet spot: cheap, fast, scalable. Cloud storage is 40% cheaper than local storage, and S3 is 3–5 times more efficient in terms of server load.
Why lazy loading is critical for performance?
Video is heavy content. For a gallery with previews, use loading="lazy" for preview <img> tags, and don't embed players initially — render a <div> with preview and load the <iframe title="Embedded content"> only on click:
document.querySelectorAll('.video-preview').forEach(el => {
el.addEventListener('click', function() {
this.innerHTML = '<iframe src="' + this.dataset.videoUrl + '?autoplay=1" ... title="Embedded content"></iframe>';
});
});
This is critical for a gallery with 20+ videos — without this approach, the page makes 20+ requests to YouTube on load, killing performance and potentially leading to blocking by YouTube for exceeding embedded player limits. Lazy loading improves load time by 40% compared to no lazy loading.
How we do it: a real case
On a project for an educational platform, we built a video gallery with 250+ lessons. The client initially stored videos on the same server, and page load times averaged 8 seconds. We moved all videos to S3, implemented lazy loading for the list and detail pages, and optimized the infoblock structure with proper indexing. After the changes, load time dropped to 1.2 seconds, and server CPU usage decreased by 70%. The gallery now handles 10,000+ daily views without issues.
What's included in the video gallery setup
| Stage | Description | Duration | Result |
|---|---|---|---|
| Analytics | Audit of the current site, gather requirements for the video gallery | from 1 day | Technical specification |
| Design | Develop infoblock structure, choose storage type | from 2 days | Infoblock schema, layout |
| Implementation | Create infoblock, components, templates, player | from 5 days | Working gallery |
| Testing | Check on all devices and browsers | from 1 day | Test protocol |
| Deployment | Deploy to production server, configure caching | from 1 day | Ready functionality |
You get: documentation, access, source code, staff training. We'll evaluate your project in 1 day — contact us for a consultation.
Work process
- Analytics: study current site architecture, number and volume of videos, integration requirements with 1C or YouTube.
- Design: choose storage type (local, cloud, YouTube), design infoblock and templates.
- Implementation: create infoblock, components, customize templates, implement lazy loading.
- Testing: verify on popular devices and browsers, measure performance.
- Deployment: release to production server, configure backup and monitoring.
Timeline and guarantees
Estimated work duration — from 10 to 20 days depending on complexity. Cost is calculated individually. We guarantee 12 months of technical support after project delivery. Order the video gallery setup and get a consultation. To order the video gallery setup, contact us — we'll prepare a commercial proposal within a day.
For a complete 1c-bitrix video gallery solution, ensure the bitrix video gallery setup includes proper caching and the news.list component video rendering. The clouds module bitrix integration for s3 video storage will further optimize performance.