HTML5 video tag : Can't use relative height and properly place Controls

Question

Using reactjs, I'm inserting a video in a component but it doesn't seems to like when I use a relative unit in the max-height I've set for the container.

And I'd like to use vh to set the max-height, but when I do the video goes above the other contents of the page (like a wild z-index) and don't work like a child-block that'd set the container's dimensions...

Is it possible to counter/avoid that effect?

---

Simplified render method :

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

---

Here is the video, and I've another issue but I can't seem to find anything about it...
The video's controls are over the video's bottom, hence you can't see a part of the video.
I'd like to have the controls under the video, is it possible?.

Answer 1

As stated by Tushar Vaghela in the comments, this is part of the shadow-dom (the built in browser CSS, essentially).

The best solution right now is to hide controls and use simple custom ones. Here's everything you need, courtesy of MDN.

• The code
• Live example
• Written guide