Properties
Property | Type | Default Value |
---|---|---|
type | String | iframe |
tag | String | div |
aspect | String | 16by9 |
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.vue -->
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 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.).
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.
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>
<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>
<b-embed>
Property | Type | Default Value |
---|---|---|
type | String | iframe |
tag | String | div |
aspect | String | 16by9 |
CHANGED in 2.0.0-rc.22 You can import individual components into your project via the following named exports:
Component | Named Export | Import Path |
---|---|---|
<b-embed> | BEmbed | bootstrap-vue |
Example:
import { BEmbed } from 'bootstrap-vue' Vue.component('b-embed', BEmbed)
CHANGED in 2.0.0-rc.22 Importing plugins has been simplified.
This plugin includes all of the above listed individual components. Plugins also include any component aliases.
Named Export | Import Path |
---|---|
EmbedPlugin | bootstrap-vue |
Example:
import { EmbedPlugin } from 'bootstrap-vue' Vue.use(EmbedPlugin)