Fixed aspect ratio box with letter and pillarboxing between header and footer

Question

Running the following code snippet will provide a framework for what I am visually hoping to accomplish, with some concessions made in the CSS that I'd like to remove:

body {
  height: 100vh;
  margin: 0;
}

.container>* {
  height: 100%;
  width: 100%;
  flex: 0 0 50px;
}

.container {
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header {
  background-color: red;
}

.content {
  background-color: blue;
  flex: 1;
  position: relative;
}

.footer {
  margin-top: auto;
  background-color: yellow;
}

.fixedRatio {
  height: 56.25vw;
  max-height: calc(100vh - 100px);
  width: calc((100vh - 100px) * (1/0.5625));
  ;
  max-width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

<div class="container">
  <div class="header"></div>
  <div class="content">
    <div class="fixedRatio"></div>
  </div>
  <div class="footer"></div>
</div>

Included are a header and footer of arbitrary height and a fixed aspect ratio box centered vertically and horizontally between them. I'd like it to letter- and pillar-box as the page is resized, and respond to increases/decreases in header height.

As it stands, the code accomplishes many of these goals but falls short in that it requires that the heights of the header and footer be included in the CSS for the fixed aspect ratio box. This limits my ability to freely manipulate the size of the header, or let it grow arbitrarily as a function of content (at least to the extent I am not using JavaScript).

I've managed to make this work successfully for the case of letter-boxing (top and bottom black bars) by leveraging the fact that the content is full-width. As a result, I can use 100vw / 56.25vw (in the case of 16:9) for the width/height and achieve the desired result. Unfortunately, when moving the content around to pillar-box, this obviously falls apart.

I've more or less resigned myself to needing JavaScript to - at the very least - toggle a class based on the dimensions of the inner content box to determine whether letter or pillar boxing is appropriate. However, it became very clear very quickly that setting width as a function of height is not trivial.

I was fortunate to come across this post, where a solution leveraging a 1x1 pixel is used to set width as a function of height.

I was able to successfully make this work for the pillar-boxing case in both Chrome and Safari, but not Firefox (IE11 and Edge not yet tested, but coverage is desired... pray for me). I'd like to get recent versions of Chrome/Safari/Firefox covered, as well as I11/Edge if possible.

The solution for Chrome/Safari is as follows:

body {
  height: 100vh;
  margin: 0;
}

.header,
.footer {
  height: 100%;
  width: 100%;
}

.container>* {
  flex: 0 0 50px;
}

.container {
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header {
  background-color: red;
}

img {
  display: block;
  height: 100%;
  background: orange;
}

.content {
  background-color: blue;
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.footer {
  margin-top: auto;
  background-color: yellow;
}

.fixedRatio {
  background-color: purple;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  margin: auto;
  bottom: 0;
}

<div class="container">
  <div class="header"></div>
  <div class="content">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
    <div class="fixedRatio"></div>
  </div>
  <div class="footer"></div>
</div>

There are a few things to consider. I am comfortable with fixing the height of the footer. This constraint may prove valuable, but I've been unable to yield anything from it yet. I am also comfortable with radical alterations to the included markup, supposing it enables the desired behavior.

The end-purpose of this would be to maintain fixed aspect ratio content between this flexible header, static footer, and overlay content upon it.

I am well aware that I could run some JavaScript and set these heights manually with great success, but I am coming at this from a position largely based in intellectual curiosity. If you, too, are curious, perhaps you can lend a hand in exploring :)

Thank you!