Видео повышает вовлечённость и время на странице. В 1С-Битрикс ролик можно разместить несколькими способами: загрузить свой файл и показать его через медиаплеер, вставить готовый компонент видео или встроить код с YouTube и других сервисов.
Способы вставки видео
В 1С-Битрикс есть три основных способа разместить видео на странице. Выбор зависит от того, где хранится ролик и какие настройки воспроизведения вам нужны.
| Способ | Когда использовать | Где хранится файл |
|---|---|---|
| Кнопка «Видео» в визуальном редакторе | Нужно быстро вставить свой ролик с медиаплеером | На вашем сервере |
Компонент bitrix:player | Требуется гибкая настройка плеера, плейлист, превью | На вашем сервере или по URL |
| Вставка HTML-кода (iframe) | Ролик уже загружен на YouTube, Rutube, VK Видео | На внешнем видеосервисе |
Для тяжёлых роликов предпочтительнее внешние сервисы: они берут на себя нагрузку по отдаче видео и адаптивное качество. Свой файл через плеер уместен для коротких материалов и закрытых разделов.
Вставка видео через визуальный редактор
Самый быстрый способ — воспользоваться кнопкой на панели визуального редактора при правке публичной страницы или свойства инфоблока.
- Откройте страницу на редактирование: режим правки → Изменить страницу либо через Контент → Структура сайта → Файлы и папки.
- Установите курсор в место вставки и нажмите на панели редактора кнопку «Видео».
- В открывшемся окне укажите путь к видеофайлу (кнопка обзора откроет структуру папок сайта) или вставьте прямой URL ролика.
- Задайте ширину и высоту области плеера, при необходимости — картинку-превью (постер).
- Нажмите «Сохранить» — в тексте появится плейсхолдер, а на публичной странице отобразится плеер.
Редактор вставит вызов компонента медиаплеера. Переключившись в режим HTML, вы увидите сгенерированный код и сможете поправить параметры вручную.
Компонент видеоплеера
Для тонкой настройки используйте компонент bitrix:player. Он поддерживает форматы FLV, MP4, а также потоковое воспроизведение и плейлисты.
- В визуальном редакторе перейдите на вкладку «Компоненты» и найдите раздел «Сервисы» → «Медиаплеер».
- Перетащите компонент в тело страницы.
- В настройках укажите путь к файлу в поле
PATH, размерыWIDTHиHEIGHT. - Настройте автозапуск (
AUTOSTART), громкость по умолчанию и картинку-заставку (PREVIEW).
Ключевые параметры компонента:
PLAYER_TYPE— тип плеера: авто, видео или аудио;SKIN— оформление панели управления;ADVANCED_MODE_SETTINGS— доступ к расширенным параметрам буферизации и стриминга.
Встраивание видео с YouTube и других сервисов
Если ролик уже опубликован на видеохостинге, встраивать его через iframe удобнее и легче для сервера.
- На странице ролика (YouTube, Rutube, VK Видео) нажмите «Поделиться» → «Встроить» и скопируйте код
<iframe>. - В визуальном редакторе переключитесь в режим «HTML» (вкладка внизу окна редактирования).
- Вставьте скопированный код в нужное место документа.
- Вернитесь в визуальный режим и сохраните страницу.
Чтобы плеер был адаптивным, оберните iframe в контейнер с относительным позиционированием и уберите жёсткие атрибуты width/height, задав размеры через CSS. Это предотвратит выход видео за границы колонки на мобильных.
Размеры, превью и адаптивность
Правильные размеры важны для вёрстки. Несколько рекомендаций:
- Задавайте соотношение сторон 16:9 (например, 640×360, 854×480) — это стандарт для большинства роликов.
- Для адаптивного вывода используйте обёртку с
padding-top: 56.25%и абсолютно позиционированный iframe/плеер внутри. - Всегда указывайте превью-картинку (постер): она отображается до запуска и ускоряет визуальную загрузку страницы.
- Не включайте автозапуск без необходимости — многие браузеры блокируют его со звуком, а пользователей это раздражает.
Проверяйте отображение и в мобильной, и в десктопной версии сайта, особенно если используется адаптивный шаблон.
Частые ошибки
Типичные проблемы при работе с видео и способы их устранения:
- Видео не отображается. Проверьте путь к файлу — он должен быть корректным относительно корня сайта, а сам файл существовать в указанной папке.
- Вставленный iframe пропадает после сохранения. Визуальный редактор может «вычищать» неразрешённые теги. Вставляйте код в режиме
HTMLи проверьте настройки безопасной вставки редактора. - Плеер выходит за границы блока. Уберите фиксированные размеры и примените адаптивную обёртку через CSS.
- Ролик не воспроизводится на мобильных. Убедитесь, что формат —
MP4 (H.264); устаревший FLV на мобильных устройствах не поддерживается. - Долгая загрузка страницы. Тяжёлый файл на своём сервере тормозит отдачу — перенесите ролик на видеохостинг и встройте через iframe.
Итог
Для коротких собственных роликов используйте кнопку «Видео» или компонент медиаплеера — файл хранится на сервере, настройки под контролем. Для тяжёлых материалов встраивайте видео с внешних хостингов через iframe в режиме HTML: это снимает нагрузку с сервера и даёт адаптивное качество.
Соблюдайте соотношение сторон 16:9, задавайте превью, делайте плеер адаптивным и не злоупотребляйте автозапуском. Тогда видео корректно отобразится на всех устройствах и не ухудшит скорость загрузки страницы.