Source

嵌入

通過創建可在任何設備上縮放的固有比率，根據父項的寬度創建響應式視頻或幻燈片嵌入。

關於

規則直接應用於<iframe>、<embed>、<video>和<object>元素；.embed-responsive-item當您想要匹配其他屬性的樣式時，可以選擇使用顯式後代類。

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

例子

使用和縱橫比將任何嵌入包裹<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;