嵌入

通过创建在任何设备上缩放的内在比率，根据父级的宽度创建响应式视频或幻灯片嵌入。

规则直接应用于 <iframe>、<embed>、<video> 和 <object> 元素

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

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

嵌入类型

支持的嵌入类型为 iframe（默认）、video、embed 和 object，它们转换为标准 HTML <iframe>、<video>、<embed> 和 <object> 元素。

通过 type 属性设置所需的嵌入类型。

纵横比

纵横比可以通过 aspect 属性设置。支持的纵横比有：21by9 (21:9)、16by9 (16:9)、4by3 (4:3) 和 1by1 (1:1)。默认纵横比是 16by9。纵横比在 Bootstrap 的 SCSS 中定义，并转换为类名 embed-responsive-{aspect}（例如 embed-responsive-16by9、embed-responsive-4by3 等）。

包装元素

响应式嵌入式包装在一个外部元素中（默认是 div），以强制执行响应式纵横比。可以通过 tag 属性更改此标记。

属性和子元素

提供给 <b-embed> 的任何附加属性（除了上述 type、aspect 和 tag 属性）都将应用于内部嵌入式元素（即 iframe、video、embed 或 object）。

在 <b-embed> 的开始和结束标签之间的任何子元素都将放置在内部嵌入式元素中。请注意，类型 iframe 不支持任何子元素。

示例：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-aspect> 组件

组件参考

`<b-embed>`

函数组件

查看源代码

<b-embed> 属性
<b-embed> 插槽

属性

所有属性默认值都可全局配置。

属性	类型	默认值	说明
`aspect`	`字符串`	`'16by9'`	嵌入的宽高比。支持的值为 '16by9'、'21by9'、'4by3' 和 '1by1'，并转换为 CSS 类。有关更多详细信息，请参阅文档
`标签`	`字符串`	`'div'`	指定要渲染的 HTML 标签，而不是默认标签
`类型`	`字符串`	`'iframe'`	嵌入类型。可能的值为 'iframe'、'video'、'embed' 和 'object'

插槽

名称	说明
`默认`	要放置在嵌入中的内容

导入单个组件

您可以通过以下命名导出将单个组件导入到您的项目中

组件	命名导出	导入路径
`<b-embed>`	`BEmbed`	`bootstrap-vue`

示例

import { BEmbed } from 'bootstrap-vue'
Vue.component('b-embed', BEmbed)

作为 Vue.js 插件导入

此插件包含上面列出的所有单个组件。插件还包括任何组件别名。

命名导出	导入路径
`EmbedPlugin`	`bootstrap-vue`

示例

import { EmbedPlugin } from 'bootstrap-vue'
Vue.use(EmbedPlugin)