嵌入

直接套用於 <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 prop 設定要使用的嵌入類型。

長寬比

長寬比可透過 aspect prop 設定。支援的長寬比為：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 prop 變更此標籤。

屬性和子元素<b-embed> (除了上述 type、aspect 與 tag props) 的任何其他額外屬性都套用在內嵌的元素內 (即 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> 組件