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-1.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 rations are:
21by9
(21:9), 16by9
(16:9), 4by3
(4:3) and 1by1
(1:1). The default aspect
is 16by9
.
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 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>
<b-embed>
Property | Type | Default Value |
---|---|---|
type | String | iframe |
tag | String | div |
aspect | String | 16by9 |
.native
modifier to capture browser native events such as:
@click.native="..."
,
@mouseover.native="..."
, etc. See the the official
Vue.js documentation
for more information.
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);
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);