Twitter bootstrap 16:9比率的视频与其他响应组件

我正在尝试为以下线框构建一个HTML布局-

它基本上有两列内容。第一个是引导

col-8

，第二个是

col-4

现在在第一列中，我有一个视频组件，它需要根据可用宽度（66%）相应地调整大小。为此，我使用以下CSS代码-

.video-embed {
  position: relative
  padding-bottom: 56.25%
  height: 0 
  overflow: hidden

  iframe {
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
  }
}

视频下方是300px高静态内容，宽度为100%。我不介意在某些屏幕上这是否比视口低一点

在另一列中，我有一个4:3的容器，我再次使用上面的代码来保持比例，而不显式设置高度

下面需要有一个部分，它只需要占用页面中可用的高度和宽度

但由于上面的元素（

4:3

）没有固定高度，甚至视频也没有固定高度，因此我无法布局最后一个组件（右下角）

我使用bootstrap的方向正确吗？有没有其他的布局技巧，我可以遵循布局所有这些东西

这个布局中最重要的部分是16:9的视频。我对UI设计有点陌生，所以觉得很难

---

谢谢

您没有说明引导的版本是什么，但从3.2版开始，您可以使用内置的嵌入式类（请参见响应嵌入式）：

---

您还可以查看类似于

的框架，您不需要说明引导的版本，但从3.2版开始，您可以使用内置嵌入式类（请参阅响应嵌入式）：

您也可以查看类似的框架

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