Responsive Embed

Wrap embedded content like videos, maps, and calendars in a responsive embed container to maintain the correct aspect ratio regardless of screen size.

To make sure embedded content maintains its aspect ratio as the width of the screen changes, wrap the iframe, object, embed, or video in a container with the .responsive-embed class.

Watch this part in video

<div class="responsive-embed">
  <iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe>
</div>

Aspect Ratios

Add ratio classes to change the aspect ratio of responsive embeds. The default ratio is 4:3. The .widescreen class will change the container's aspect ratio to 16:9.

Watch this part in video

<div class="responsive-embed widescreen">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/WUgvvPRH7Oc" frameborder="0" allowfullscreen></iframe>
</div>

The ratio classes are generated by the keys in the $responsive-embed-ratios map in your settings file. Only the default key is required. You can, for example, make your default ratio 16:9, remove widescreen, and add other aspect ratios.

$responsive-embed-ratios: (
  default: 16 by 9,
  vertical: 9 by 16,
  panorama: 256 by 81,
  square: 1 by 1,
);

Watch this part in video

<div class="responsive-embed panorama">
  <iframe width="1024" height="315" src="https://www.youtube.com/embed/bnD9I24EL_4" frameborder="0" allowfullscreen></iframe>
</div>

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name	Type	Default Value	Description
`$responsive-embed-margin-bottom`	Number	`rem-calc(16)`	Margin below a responsive embed container.
`$responsive-embed-ratios`	Map	`default: 4 by 3 widescreen: 16 by 9`	Aspect ratios used to determine padding-bottom of responsive embed containers.

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

responsive-embed

@include responsive-embed($ratio);

Creates a responsive embed container.

Parameter	Type	Default Value	Description
`$ratio`	String or List	`default`	Ratio of the container. Can be a key from the `$responsive-embed-ratios` map or a list formatted as `x by y`.