Встраивание
Создание интерактивного видео или слайд-шоу, которое встраивается на основе родительской ширины, создавая внутреннее соотношение. «Отзывчиво» для любого устройства.
Инфо
Правила применяются прямо для элементов <iframe>
, <embed>
, <video>
и <object>
по желанию задавайте дочерний класс .embed-responsive-item
, когда хотите создать такой же стиль другим атрибутам.
Совет профессионала! Вам нет необходимости включать атрибут frameborder="0"
в элементы <iframe>
, т.к. он будет «перебит».
Пример
Оберните вставленный объект, например <iframe>
, родительским элементом класса .embed-responsive
с заданным соотношением сторон экрана. Элемент класса .embed-responsive-item
не так уж необходим, но мы приветствуем его использование.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
Соотношение сторон экрана
Таковое можно настраивать классами-модификаторами.
В _variables.scss
вы можете изменить пропорции, которые вы хотите использовать. Вот пример списка $embed-responsive-aspect-ratios
: