Компонент для адаптивного встраивания 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