响应式嵌入

将嵌入式内容（如视频、地图和日历）包装在响应式嵌入容器中，以在任何屏幕尺寸下保持正确的纵横比。

为了确保嵌入内容在屏幕宽度变化时保持其纵横比，请将 iframe、object、embed 或 video 包装在带有 .responsive-embed 类的容器中。

<div class="responsive-embed">
  <iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe>
</div>

纵横比

添加比例类以更改响应式嵌入的纵横比。默认比例为 4:3。.widescreen 类会将容器的纵横比更改为 16:9。

观看此部分的视频

<div class="responsive-embed widescreen">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/WUgvvPRH7Oc" frameborder="0" allowfullscreen></iframe>
</div>

比例类由设置文件中 $responsive-embed-ratios 映射中的键生成。只有 default 键是必需的。例如，您可以将默认比例设为 16:9，删除宽屏，并添加其他纵横比。

$responsive-embed-ratios: (
  default: 16 by 9,
  vertical: 9 by 16,
  panorama: 256 by 81,
  square: 1 by 1,
);

观看此部分的视频

<div class="responsive-embed panorama">
  <iframe width="1024" height="315" src="https://www.youtube.com/embed/bnD9I24EL_4" frameborder="0" allowfullscreen></iframe>
</div>

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量自定义此组件的默认样式。

名称	类型	默认值	描述
`$responsive-embed-margin-bottom`	数字	`rem-calc(16)`	响应式嵌入容器下方的边距。
`$responsive-embed-ratios`	映射	`default: 4 比 3 widescreen: 16 比 9`	用于确定响应式嵌入容器的 padding-bottom 的纵横比。

混合

我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用这些混合来从我们的组件中构建自己的类结构。

responsive-embed

@include responsive-embed($ratio);

创建一个响应式嵌入容器。

参数	类型	默认值	描述
`$ratio`	字符串或列表	`默认`	容器的比例。可以是 `$responsive-embed-ratios` 映射中的键或格式为 `x 比 y` 的列表。