Как адаптивно вставить Youtube Shorts на сайт?
Использую Bootstrap 4 при вёрстке. Задача: вставить адаптивное видео в формате шортс с ютуба (вертикальное видео). Для горизонтальных у бутстрапа есть пример
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Qh9uHOZ7zMM" allowfullscreen></iframe>
</div>
А как быть с вертикальным? Спасибо!
Ответы (1 шт):
Автор решения: Татьяна Маковозова
→ Ссылка
Для вертикального видео в Bootstrap 4, вы можете использовать класс embed-responsive с пользовательским соотношением сторон. Вот пример кода для вертикального видео с соотношением сторон 9:16:
<style>
.embed-responsive-9by16::before {
padding-top: 177.77%; /* 9:16 aspect ratio */
}
</style>
<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 для вставки вертикального видео с адаптивным изменением размеров.