制作适合宽高比的视频的框，加上静态大小的页脚

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，它是像saran包装一样在视频周围延伸的填充。

<强>段

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>