| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: Embeds
|
|
|
4 |
description: Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
|
|
|
5 |
group: utilities
|
|
|
6 |
toc: true
|
|
|
7 |
---
|
|
|
8 |
|
|
|
9 |
## About
|
|
|
10 |
|
|
|
11 |
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.
|
|
|
12 |
|
|
|
13 |
**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
|
|
|
14 |
|
|
|
15 |
## Example
|
|
|
16 |
|
|
|
17 |
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.
|
|
|
18 |
|
|
|
19 |
{{< example >}}
|
|
|
20 |
<div class="embed-responsive embed-responsive-16by9">
|
|
|
21 |
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
|
|
|
22 |
</div>
|
|
|
23 |
{{< /example >}}
|
|
|
24 |
|
|
|
25 |
## Aspect ratios
|
|
|
26 |
|
|
|
27 |
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
|
|
|
28 |
|
|
|
29 |
```html
|
|
|
30 |
<!-- 21:9 aspect ratio -->
|
|
|
31 |
<div class="embed-responsive embed-responsive-21by9">
|
|
|
32 |
<iframe class="embed-responsive-item" src="..."></iframe>
|
|
|
33 |
</div>
|
|
|
34 |
|
|
|
35 |
<!-- 16:9 aspect ratio -->
|
|
|
36 |
<div class="embed-responsive embed-responsive-16by9">
|
|
|
37 |
<iframe class="embed-responsive-item" src="..."></iframe>
|
|
|
38 |
</div>
|
|
|
39 |
|
|
|
40 |
<!-- 4:3 aspect ratio -->
|
|
|
41 |
<div class="embed-responsive embed-responsive-4by3">
|
|
|
42 |
<iframe class="embed-responsive-item" src="..."></iframe>
|
|
|
43 |
</div>
|
|
|
44 |
|
|
|
45 |
<!-- 1:1 aspect ratio -->
|
|
|
46 |
<div class="embed-responsive embed-responsive-1by1">
|
|
|
47 |
<iframe class="embed-responsive-item" src="..."></iframe>
|
|
|
48 |
</div>
|
|
|
49 |
```
|
|
|
50 |
|
|
|
51 |
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's an example of the `$embed-responsive-aspect-ratios` list:
|
|
|
52 |
|
|
|
53 |
```scss
|
|
|
54 |
$embed-responsive-aspect-ratios: (
|
|
|
55 |
(21 9),
|
|
|
56 |
(16 9),
|
|
|
57 |
(4 3),
|
|
|
58 |
(1 1)
|
|
|
59 |
) !default;
|
|
|
60 |
```
|