Gecko [ theprintave.ca ]

Name	Size	Permission	Date
borders.md	2.41 KB	-rw-r--r--	2021-01-19 16:16
clearfix.md	916 B	-rw-r--r--	2021-01-19 16:16
close-icon.md	365 B	-rw-r--r--	2021-01-19 16:16
colors.md	2.68 KB	-rw-r--r--	2021-01-19 16:16
display.md	3.88 KB	-rw-r--r--	2021-01-19 16:16
embed.md	1.87 KB	-rw-r--r--	2021-01-19 16:16
flex.md.gz	2.79 KB	-rw-r--r--	2021-01-19 16:16
float.md	1.67 KB	-rw-r--r--	2021-01-19 16:16
image-replacement.md	968 B	-rw-r--r--	2021-01-19 16:16
interactions.md	814 B	-rw-r--r--	2021-01-19 16:16
overflow.md	1006 B	-rw-r--r--	2021-01-19 16:16
position.md	1.38 KB	-rw-r--r--	2021-01-19 16:16
screen-readers.md	596 B	-rw-r--r--	2021-01-19 16:16
shadows.md	740 B	-rw-r--r--	2021-01-19 16:16
sizing.md	2.13 KB	-rw-r--r--	2021-01-19 16:16
spacing.md	3.95 KB	-rw-r--r--	2021-01-19 16:16
stretched-link.md.gz	1.46 KB	-rw-r--r--	2021-01-19 16:16
text.md.gz	1.5 KB	-rw-r--r--	2021-01-19 16:16
vertical-align.md	1.25 KB	-rw-r--r--	2021-01-19 16:16
visibility.md	914 B	-rw-r--r--	2021-01-19 16:16

Rename

---
layout: docs
title: Embeds
description: Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
group: utilities
toc: true
---

## About

Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.

**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.

## Example

Wrap any embed like an `<iframe>` in a parent element with `.embed-responsive` and an aspect ratio. The `.embed-responsive-item` isn't strictly required, but we encourage it.

{{< example >}}
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
{{< /example >}}

## Aspect ratios

Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:

```html

<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
```

Within `_variables.scss`, you can change the aspect ratios you want to use. Here's an example of the `$embed-responsive-aspect-ratios` list:

```scss
$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;
```