Как использовать Bootstrap 5 для создания видео, которое будет адаптивным?

Как изменить размер видео, чтобы оно было по ширине родительского div на обычном мониторе?
  • 6 ноября 2023 г. 8:33
Ответы на вопрос 2
Для создания адаптивного видео с использованием Bootstrap 5 вы можете использовать классы `embed-responsive` и `embed-responsive-item`.

Вот пример кода, который позволяет создать адаптивное видео:

```html
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ваш_видео_id"></iframe>
</div>
```

Замените `"ваш_видео_id"` на идентификатор видео с YouTube или другого видеохостинга.

Чтобы изменить размер видео так, чтобы оно было по ширине родительского div на обычном мониторе, добавьте класс `w-100` к div родительского элемента:

```html
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ваш_видео_id"></iframe>
</div>
```

Кроме того, убедитесь, что ваш родительский div или контейнер имеет правильные стили для ширины и отступов, чтобы видео правильно вписывалось.

Вы также можете настроить другие размеры видео, поменяв класс `embed-responsive-*`, где * - это соотношение сторон видео (например, `embed-responsive-4by3` для 4:3 соотношения сторон).
- Используйте следующий код для создания блока с соотношением сторон 16:9:
Похожие вопросы