响应式嵌入 YouTube 自定义尺寸 Bootstrap 3.3.6

Question

我了解 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>

Answer 1

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

你可以很容易地达到 embed-responsive-5by3 3/5 = 60%

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

.embed-responsive 给出其余的样式

响应式嵌入 YouTube 自定义尺寸 Bootstrap 3.3.6

Responsive Embed YouTube Customized Size Bootstrap 3.3.6

html

css

embed

youtube

twitter-bootstrap