嵌入

透過建立會在任何裝置上調整比例的內在比例，建立根據父層寬度的回應式影片或投影片嵌入。

關於

規則會直接套用至 <iframe>、<embed>、<video> 和 <object> 元素；當您想要符合其他屬性的樣式時，可選擇使用明確的後代類別 .embed-responsive-item。

專業提示！您不需要在 <iframe> 中包含 frameborder="0"，因為我們會為您覆寫它。

範例

將任何嵌入內容（例如 <iframe>）包覆在具有 .embed-responsive 和長寬比的父層元素中。.embed-responsive-item 並非絕對必要，但我們建議使用。

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

長寬比

長寬比可以使用修改器類別自訂。預設提供下列長寬比類別

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

您可以在 _variables.scss 中變更您要使用的長寬比。以下是 $embed-responsive-aspect-ratios 清單的範例

$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;