嵌入

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

关于

规则直接应用于<iframe><embed><video><object>元素; 要与其他属性的样式匹配时,可以选择使用显式后代类.embed-response-item。

专业提示!您不需要在您的<iframe>中包含frameborder =“ 0”,因为我们会为您覆盖它。

例子

.embed-sensitive和长宽比将任何像<iframe>这样的嵌入包在父元素中。 并非严格要求.embed-response-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-response-aspect-ratios清单的示例:

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