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.
The .ratio-item isn’t strictly required, but we encourage it.

Code Example
<div class="ratio">
  <iframe class="ratio-item" 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>