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.


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="" allowfullscreen></iframe>

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>