Foundation
Jump to Nav

# 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.

    <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.

    <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,
    );

    <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`.