Выровнять <video>центр flexbox с переменной высотой

Question

У меня есть видео страница с 3 основными элементами (заголовок, видео, настройки нижнего колонтитула).Нижний колонтитул настроек является сворачиваемым.

Я доволен макетом, когда нижний колонтитул настроек виден, но мне хотелось бы увеличить размер видео, чтобы поднять оставшуюся высоту после свертывания нижнего колонтитула настроек.Другими словами, видео должно немного увеличиться в размерах при коллапсе нижнего колонтитула.

Вот что у меня получилось:

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>

Лучше всего просматривать в полноэкранном режиме!

Я ищу решение css-only , где видеозанимает доступное пространство между верхним и нижним колонтитулом.Прямо сейчас я жестко закодировал max-height к элементу видео, чтобы привести его в соответствие, но мои попытки решить эту проблему иначе не увенчались успехом.

Я уже видел сообщения, предлагающие position: absolute и relative дляребенок и родитель соответственно, но многие уровни flexbox затрудняют это для меня.

Благодарен за любые идеи или предложения.