Gecko [ gandhischool.edu.np ]

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

Code Editor : embed.md

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

${this.title}

Code Editor : embed.md