Адаптивное видео на страницах

При разработке сайтов на 1С-Битрикс часто возникает задача корректного отображения видео на разных устройствах. Без адаптации видеоролик может выходить за границы блока или некорректно отображаться на мобильных устройствах.

Проблема неадаптивного видео: пример

На иллюстрации ниже видно, как видео с фиксированной шириной и высотой может «залезать» на контент или выходить за пределы блока на мобильных устройствах:

Пример: Видео с фиксированными размерами не адаптируется под ширину экрана и перекрывает соседний контент.

Решение: Bootstrap — стандарт для адаптивного видео

Самый надёжный способ реализовать адаптивное видео в 1С-Битрикс — использовать стандартные классы Bootstrap. Эта CSS-библиотека встроена во многие шаблоны 1С-Битрикс и является индустриальным стандартом для адаптивной вёрстки.

Пример для Bootstrap 4 (актуален для большинства шаблонов 1С-Битрикс)

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/P2sY7jDoReg" allowfullscreen></iframe>
</div>

Пример для Bootstrap 5

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/P2sY7jDoReg" allowfullscreen></iframe>
</div>

В обоих случаях видео будет автоматически подстраиваться под ширину родительского блока и сохранять правильное соотношение сторон.

Если Bootstrap не используется

Можно сделать адаптивное видео с помощью чистого CSS:

<div style="aspect-ratio: 16/9; width: 100%; max-width: 560px; margin-bottom:1em; background:#000;">
  <iframe src="https://www.youtube.com/embed/P2sY7jDoReg" style="width:100%;height:100%;border:0;display:block;" allowfullscreen></iframe>
</div>

Для старых браузеров используйте классический CSS-хак:

<style>
.responsive-video {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding-bottom: 56.25%;
  height: 0;
  margin-bottom: 1em;
  background: #000;
}
.responsive-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
</style>

<div class="responsive-video">
  <iframe src="https://www.youtube.com/embed/P2sY7jDoReg" allowfullscreen></iframe>
</div>

Использование в шаблонах 1С-Битрикс

• В большинстве современных шаблонов 1С-Битрикс Bootstrap уже подключён.
• Если используете свой шаблон — проверьте, что стили Bootstrap доступны на странице.
• Вставляйте код в режиме HTML или прямо в шаблон компонента.
• Если Bootstrap не подключён — используйте вариант с CSS.

Подробнее о создании адаптивных шаблонов на Bootstrap для 1С-Битрикс — смотрите в официальной документации.

Частые вопросы

• Можно ли использовать компонент Bitrix D7 для адаптивного видео?
  На данный момент отдельного компонента Bitrix D7 для вывода адаптивного видео не существует. Для вставки видео используйте HTML-код с нужными классами или стандартные средства платформы. Официальная документация 1С-Битрикс.
• Почему видео не масштабируется?
  Проверьте, подключён ли Bootstrap и правильно ли применены классы. Если Bootstrap не используется — примените CSS-решение выше.

Обновлено: 28.06.2025 | Для платформы 1С-Битрикс: Управление сайтом 24.x