# Responsive Embeds

> Create responsive video or slideshow embeds based on the width of the parent by creating an
> intrinsic ratio that scales on any device.

Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements

```html
<div>
  <b-embed
    type="iframe"
    aspect="16by9"
    src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"
    allowfullscreen
  />
</div>

<!-- b-embed.vue -->
```

## Embed types

Supported embed types are `iframe` (default), `video`, `embed` and `object`, which translate to the
standard HTML `<iframe>`, `<video>`, `<embed>` and `<object>` elements.

Set the type of embed you would like via the `type` prop.

## Aspect ratios

Aspect ratios can be set via the `aspect` prop. Supported aspect rations are: `21by9` (21:9),
`16by9` (16:9), `4by3` (4:3) and `1by1` (1:1). The default aspect is `16by9`.

## Wrapper element

The Responsive embed is wrapped in an outer element (default is `div`) to enforce the responsive
aspect ratio. You can change this tag via the `tag` prop.

## Attributes and Child Elements

Any additional attributes provided to `<b-embed>` (other than the above `type`, `aspect` and `tag`
props are applied to the inner embeded element (i.s. `iframe`, `video`, `embed` and `object`).

Any children elements between the opening and closing `<b-embed>` will be placed inside the inner
embeded element. Note that type `iframe` does not support any children.

**Example: Responsive embedding of an HTML5 `<video>`**

```html
<div>
  <b-embed type="video" aspect="4by3" controls poster="poster.png">
    <source src="devstories.webm" type="video/webm;codecs=&quot;vp8, vorbis&quot;" />
    <source src="devstories.mp4" type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" />
  </b-embed>
</div>
```

<!-- Component reference added automatically from component package.json -->