嵌入(Responsive Embeds)

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

规则直接应用于 <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>

嵌入类型

支持的嵌入类型为 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-embed> 属性

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

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