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

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

中间的熊形象是视频。包含视频的div应该是16:9，页脚应该是一些静态高度和100%宽度

虽然我已经找到了一个，但我很难将它与静态大小的底部协调起来

从视频容器开始，我基本上有以下几点：

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

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

---

为了便于回答，

外部容器的高度通常为0，是像saran wrap一样在视频周围延伸的填充物

片段

html{
字体：400 16px/1.428控制台；
框大小：边框框
}
html，
身体{
身高：100%；
宽度：100%；
}
*,
*：：之后，
*：：之前{
框大小：继承；
保证金：0；
填充：0；
边框：0非透明；
}
vWrap先生{
边框：0非透明；
位置：相对位置；
垫底：56.25%；
身高：0；
溢出：隐藏；
}
维德先生{
位置：绝对位置；
宽度：100%；
高度：自动%；
最高高度：96%；
左：0；
排名：0；
}
页脚{
宽度：100%；
高度：40px；
明确：两者皆有；
位置：相对位置；
}

.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;
  }
}