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

edit on codepen button
<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

edit on codepen button
<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

edit on codepen button
<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.

NameTypeDefault ValueDescription
$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.

ParameterTypeDefault ValueDescription
$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.