Embed-wrap

A container component for wrapping embeded media content in order to make them responsive.

embed-wrap

<div class="embed-wrap">
  <iframe class="embed-wrap__item" ...></iframe>
</div>

embed-wrap_ratio

Some media require different aspect ratios. In these cases there are a few modifiers for common ratios.

<div class="embed-wrap embed-wrap_ratio_16x9">
  <iframe class="embed-wrap__item" ...></iframe>
</div>

<div class="embed-wrap embed-wrap_ratio_4x3">
  <iframe class="embed-wrap__item" ...></iframe>
</div>

<div class="embed-wrap embed-wrap_ratio_3x2">
  <iframe class="embed-wrap__item" ...></iframe>
</div>