bootstrap-vue/src/components/embed/README.md

BootstrapVue, with over 40 plugins and more than 80 custom components, custom directives, and over 300 icons, provides one of the most comprehensive implementations of Bootstrap v4 components and grid system for Vue.js. With extensive and automated WAI-AR

# 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
  ></b-embed>
</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 ratios are: `21by9` (21:9), `16by9`
(16:9), `4by3` (4:3) and `1by1` (1:1). The default aspect is `16by9`. Aspect ratios are defined in
Bootstrap's SCSS and translate to the classname `embed-responsive-{aspect}` (i.e.
`embed-responsive-16by9`, `embed-responsive-4by3`, etc.).

## 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 embedded element (i.e. the `iframe`, `video`, `embed` or `object`).

Any children elements between the opening and closing `<b-embed>` will be placed inside the inner
embedded element. Note that the 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="dev-stories.webm" type="video/webm">
    <source src="dev-stories.mp4" type="video/mp4">
  </b-embed>
</div>
```

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