html - 制作适合视频纵横比的框，加上静态大小的页脚

Question

我想要一些看起来有点像这样的东西:

中间的熊图像是视频。包含视频的 div 应为 16:9，页脚应为静态高度和 100% 宽度。

虽然我找到了一个handy little mixin for matching an aspect ratio ，我无法将其与静态大小的底部相协调。

从视频容器开始，我基本上有以下内容:

<div class="container">
  <div class="content">
    <video src="http://www.w3schools.com/html/movie.mp4" autoplay />
  </div>
</div>

使用以下 (S)CSS:

.container {
  position: relative;

  &::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%;  // 16:9
  }

  & > .content {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
  }
}

如何将这个静态大小的栏添加到框的底部以保持纵横比？

为了方便回答，here is a codepen with what I more or less have

Answer 1

外层容器的高度通常为 0，它是像保鲜膜一样围绕视频延伸的内边距。

片段

html {
  font: 400 16px/1.428 Consolas;
  box-sizing: border-box
}

html,
body {
  height: 100%;
  width: 100%;
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0 none transparent;
}

.vWrap {
  border: 0 none transparent;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.vid {
  position: absolute;
  width: 100%;
  height: auto%;
  max-height: 96%;
  left: 0;
  top: 0;
}

footer {
  width: 100%;
  height: 40px;
  clear: both;
  position: relative;
}

<div class='vWrap'>
  <video id='vid1' class='vid' src='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' controls>
  </video>
</div>
<footer class='footer'></footer>