Embeds
Create responsive video or slide-show embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
Rules are directly applied to <iframe>
, <embed>
, <video>
, and <object>
elements.
To use this feature add embedding element to container with class .embed-container
. Default size is a 16x9
.
<div class="embed-container">
<iframe src="https://www.youtube.com/embed/BT59rohv6jw?rel=0" allowfullscreen></iframe>
</div>
Aspect ratio
Aspect ratios can be customised with modifier classes. To change embeds size add one of size classes:
.size-21x9
,
.size-16x9
,
.size-4x3
,
.size-1x1
.
21x9
<!-- 21:9 aspect ratio -->
<div class="embed-container size-21x9">
<iframe src="https://www.youtube.com/embed/BT59rohv6jw?rel=0" allowfullscreen></iframe>
</div>
16x9
<!-- 16:9 aspect ratio -->
<div class="embed-container size-16x9">
<iframe src="https://www.youtube.com/embed/BT59rohv6jw?rel=0" allowfullscreen></iframe>
</div>
4x3
<!-- 4:3 aspect ratio -->
<div class="embed-container size-4x3">
<iframe src="https://www.youtube.com/embed/BT59rohv6jw?rel=0" allowfullscreen></iframe>
</div>
1x1 (square)
<!-- 1:1 aspect ratio -->
<div class="embed-container size-1x1">
<iframe src="https://www.youtube.com/embed/BT59rohv6jw?rel=0" allowfullscreen></iframe>
</div>