title: HTML5 video tag : Can't use relative height and properly place Controls
body: <p>Using <a href="/questions/tagged/reactjs" class="post-tag" title="show questions tagged &#39;reactjs&#39;" rel="tag">reactjs</a>, I'm inserting a video in a component but it doesn't seems to like when I use a relative unit in the <code>max-height</code> I've set for the container.</p>
  
  <p>And I'd <strong>like to use <code>vh</code> to set the <code>max-height</code></strong>, but when I do the video <strong>goes above the other contents</strong> of the page (like a wild <code>z-index</code>) and don't work like a child-block that'd set the container's dimensions...</p>
  
  <p><strong>Is it possible to counter/avoid that effect?</strong></p>
  
  <hr>
  
  <p>Simplified render method :</p>
  
  <pre><code>render() {
    return (
      &lt;div className='ThatComponentContainer'&gt;
        &lt;div&gt;
          &lt;p&gt;Some content&lt;/p&gt;
        &lt;/div&gt;
        &lt;div className='VideoPlayer'  width='520' height='294'&gt;
          &lt;video controls preload="auto" width='520' height='294'&gt;
            &lt;source src={VideoWEBM} type="video/webm" /&gt;
            &lt;p&gt;I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.&lt;/p&gt;
          &lt;/video&gt;
        &lt;/div&gt;
        &lt;div&gt;
          Some other cotent
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.ThatComponentContainer {
    display: flex;
   }
  
  .VideoPlayer video {
    min-height: 100%;
    height: auto; 
  }
  
  .VideoPlayer {
    /* 
    max-height: 20vh;  &lt;&lt;&lt;----- I'd like to use this */
    max-height: 588px;
    min-height: 294px;
    height: auto;
  
    max-width: 90%;
    width: auto;
  }
  </code></pre>
  
  <hr>
  
  <p>Here is the video, and I've another issue but I can't seem to find anything about it...<br>
  The video's <strong>controls are over the video's bottom</strong>, hence you can't see a part of the video.<br>
  I'd like to have the <strong>controls under the video, is it possible?</strong>.</p>
  
  <p><img src="https://i.stack.imgur.com/pUo3n.png" alt="Video screen capture"></p>