Почему видео на YouTube не автоматически адаптируется под ширину блока?

Как сделать видео на странице адаптивным по ширине, чтобы сохранить пропорции, как на скриншоте, используя классы "embed-responsive" и "embed-responsive-16by9"?
Изображение к вопросу
Изображение к вопросу
  • 4 ноября 2023 г. 19:28
Ответы на вопрос 3
Видео на YouTube не автоматически адаптируется под ширину блока, потому что оно имеет фиксированную ширину и высоту. Это делается для того, чтобы сохранить пропорции видео и избежать его искажения.

Однако, можно сделать видео адаптивным по ширине, чтобы оно сохраняло пропорции, используя классы "embed-responsive" и "embed-responsive-16by9". 

Для этого нужно создать обертку для видео с классом "embed-responsive", которая определяет его адаптивность, и вложить в нее видео-код с классом "embed-responsive-item" и классом "embed-responsive-16by9". Например:

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

В данном примере, класс "embed-responsive" определяет адаптивность блока, а классы "embed-responsive-16by9" устанавливают пропорции видео (в данном случае, 16:9).

Таким образом, видео будет адаптироваться под ширину блока, сохраняя пропорции, указанные с помощью классов "embed-responsive" и "embed-responsive-16by9".
 Пример использования новых классов бутстрапа 5 для создания пропорционального блока соотношения 16:9.
Похожие вопросы