Встраивание
Создание интерактивного видео или слайд-шоу, которое встраивается на основе родительской ширины, создавая внутреннее соотношение. «Отзывчиво» для любого устройства.
Инфо
Правила применяются прямо для элементов <iframe>
, <embed>
, <video>
, и <object>
по желанию задавайте дочерний класс .embed-responsive-item
когда хотите создать такой же стиль другим атрибутам.
Совет профессионала! Вам нет необходимости включать атрибут frameborder="0"
в элементы <iframe>
s т.к. он будет перекрыт.
Example
Оберните вставленный объект, например <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>
Соотношение сторон экрана
Соотношение сторон могут быть настроены с помощью классов модификаторов. По умолчанию предоставляются следующие классы коэффициентов:
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
В _variables.scss
, вы можете изменить пропорции, которые вы хотите использовать. Вот пример списка $embed-responsive-aspect-ratios
:
$embed-responsive-aspect-ratios: (
(21 9),
(16 9),
(4 3),
(1 1)
) !default;