响应式嵌入 YouTube 自定义大小 Bootstrap 3.3.6答案

【问题标题】：Responsive Embed YouTube Customized Size Bootstrap 3.3.6响应式嵌入 YouTube 自定义大小 Bootstrap 3.3.6
【发布时间】：2016-10-05 21:43:26
【问题描述】：

我了解 Bootstrap 3.3.6 支持嵌入式 iframe 的 16by9 和 4by3 格式。如果我想定制除 16by9 和 4by3 以外的自定义尺寸，我该如何嵌入？类似于 5by3 的格式，但在缩放时仍保持比例。

非常感谢。

Bootstrap 建议的方法：

<!-- 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>

【问题讨论】：

标签： html css twitter-bootstrap youtube embed

【解决方案1】：

embed-responsive-XbyY 仅给出填充底部等于 Y/X 比率的百分比

您可以轻松制作embed-responsive-5by3 3/5 = 60%

.embed-responsive-5by3{
   padding-bottom: 60%;
}

.embed-responsive 给出了其余的样式

【讨论】：

非常感谢