Как адаптивно вставить Youtube Shorts на сайт?

Рейтинг: 0Ответов: 1Опубликовано: 09.04.2023

Использую Bootstrap 4 при вёрстке.

Задача: вставить адаптивное видео в формате шортс с Youtube (вертикальное видео).

Для горизонтальных у Bootstrap есть пример

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

А как быть с вертикальным?

css html видео bootstrap
Источник: Stack Overflow на русском

Ответы

▲ 1

Для вертикального видео в Bootstrap 4, вы можете использовать класс embed-responsive с пользовательским соотношением сторон.

Вот пример кода для вертикального видео с соотношением сторон 9:16:

.embed-responsive-9by16::before {
  padding-top: 177.77%;
  /* 9:16 aspect ratio */
}
<div class="embed-responsive embed-responsive-9by16">
  <iframe class="embed-responsive-item" 
          src="https://www.youtube.com/embed/Qh9uHOZ7zMM" allowfullscreen>
  </iframe>
</div>

В этом примере мы создаем новый класс .embed-responsive-9by16, который определяет соотношение сторон для вертикального видео.

Значение padding-top: 177.77% соответствует соотношению сторон 9:16 (16 / 9 * 100 = 177.77%).

Теперь вы можете использовать класс embed-responsive-9by16 для вставки вертикального видео с адаптивным изменением размеров.