Media Embeds
Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
Example
Wrap any embed like an <iframe> in a parent element with .ratio and an aspect ratio.
Code Example
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/SSo_EIwHSd4" allowfullscreen></iframe>
</div>
Aspect Eatios
Aspect ratios can be customized with modifier classes. By default the following ratio classes are available.
| Class Reference | Value |
|---|---|
.ratio-{value} |
21x9 | 16x9 | 4x3 | 1x1 |
Uses Example
<div class="ratio ratio-16x9">...</div>
