Align <video> center of flexbox with variable height - css

Question

I have a video page with 3 primary elements (header, video, settings footer). The settings footer is collapsable.
I am happy with the layout when the settings footer is visible, but I wish I could increase the size of the video to take up the remaining height once the settings footer is collapsed. In other words, the video should grow in size slightly on footer collapse.
Here is what I have so far:
var el = document.getElementsByClassName("settings-container")[0];
el.addEventListener("click", function(e) {
e.target.classList.toggle("collapsed");
});
body {
font-size: 16px;
}
.main-container {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
}
.header-container {
align-items: center;
border-bottom: 0.0625rem solid #b2b2b2;
display: flex;
flex: 0 0 1.938rem;
padding: .25rem .9375rem;
}
.video-container {
align-items: center;
display: flex;
flex: 1 1 auto;
justify-content: center;
padding: .9375rem;
}
.video-container .video-player {
border: 0.1875rem solid black;
display: flex;
overflow: hidden;
position: relative;
}
my-video-player {
background-color: transparent;
display: block;
font-family: arial, sans-serif;
font-size: 12px;
position: relative;
}
my-video-player .video video {
height: auto;
max-height: calc(100vh - 19.75rem);
max-width: 100%;
width: auto;
}
.settings-container {
background: #f4f4f4;
display: flex;
flex: 0 1 15rem;
flex-direction: column;
position: relative;
top: 0;
transition: flex .5s;
}
.settings-container.collapsed {
flex: 0 0 2.4rem;
}
<div class="main-container">
<div class="header-container">Header</div>
<div class="video-container">
<div class="video-player">
<my-video-player>
<div class="video">
<video autobuffer controls>
<source id="mp4" src="http://footage.framepool.com/mov/521-436-838.mp4" type="video/mp4">
</video>
</div>
</my-video-player>
</div>
</div>
<div class="settings-container">Settings - click me to collapse</div>
</div>
Best viewed in fullscreen!
I am looking for a css-only solution where the video takes up the available space between the header and the footer. Right now I have hard-coded a max-height to the video element to make it fit, but my attempts to solve this otherwise have failed.
I have already seen posts suggesting position: absolute and relative to the child and parent respectively, but the many levels of flexbox is making this hard for me.
Thankful for any ideas or suggestions.