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

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

<!-- b-embed-1.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 embded element. Note that type iframe does not support any children.

Example: Responsive embdeding of an HTML5 <video>

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

Component Reference

`<b-embed>`

view source

Properties

Property	Type	Default Value
type	String	`iframe`
tag	String	`div`
aspect	String	`16by9`

Trying to get native browser events working on your component? Use the .native modifier to capture browser native events such as: @click.native="...", @mouseover.native="...", etc. See the the official Vue.js documentation for more information.

Importing Individual Components

Component	Import Path
`<b-embed>`	`bootstrap-vue/es/components/embed/embed`

Example:

import bEmbed from 'bootstrap-vue/es/components/embed/embed';
Vue.component('b-embed', bEmbed);

Importing Embed as a Vue plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

import { Embed } from 'bootstrap-vue/es/components';
Vue.use(Embed);