Тег HTML5: нельзя использовать относительную высоту и правильно размещать элементы управления

Использование reactjs, я вставляя видео в компонент, но это не похоже на то, когда я использую относительную единицу в max-height, который я установил для контейнера.

И я бы хотел бы использовать vh для установки max-height, но когда я делаю видео , он выходит за другое содержимое страницы (например, wild z-index) и не работают как дочерний блок, который бы установил размеры контейнера...

Можно ли противодействовать этому эффекту?

---

Упрощенный метод рендеринга:

render() {
  return (
    <div className='ThatComponentContainer'>
      <div>
        <p>Some content</p>
      </div>
      <div className='VideoPlayer'  width='520' height='294'>
        <video controls preload="auto" width='520' height='294'>
          <source src={VideoWEBM} type="video/webm" />
          <p>I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.</p>
        </video>
      </div>
      <div>
        Some other cotent
      </div>
    </div>
  );
}

CSS

.ThatComponentContainer {
  display: flex;
 }

.VideoPlayer video {
  min-height: 100%;
  height: auto; 
}

.VideoPlayer {
  /* 
  max-height: 20vh;  <<<----- I'd like to use this */
  max-height: 588px;
  min-height: 294px;
  height: auto;

  max-width: 90%;
  width: auto;
}

---

Вот видео, и у меня есть еще одна проблема, но я не могу найти ничего об этом...
Элементы управления видео находятся над снизу видео, поэтому вы не можете видеть часть видео.
Я хотел бы иметь элементы управления под видео, возможно ли это?.