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

Компонент для адаптивного встраивания Bootstrap позволяет легко масштабировать видео и слайд-шоу до размеров содержащего их блока. Данный компонент может использоваться с элементами <iframe>, <video>, <object> и <embed>.

Чтобы применить компонент для адаптивного встраивания к одному из этих элементов, вставьте элемент внутрь <div> c классом .embed-responsive вместе с классом, определяющим соотношение сторон (например, .responsive-embed-16by9 или .responsive-embed- 4by3).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/wMuNjnNyaiA" allowfullscreen></iframe> </div>

Не нужно использовать frameborder="0" в элементе <iframe>, поскольку Bootstrap переопределяет это.

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты