首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

内嵌 | Embeds

通过创建可在任何设备上缩放的固有比率,根据父级的宽度创建响应式视频或幻灯片嵌入。

关于

规则被直接施加到<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>

扫码关注腾讯云开发者

领取腾讯云代金券