HTML5视频标记：无法使用相对高度并正确放置控件

Question

使用reactjs，我在一个组件中插入一个视频，但是当我在为容器设置的max-height中使用相对单位时它似乎不喜欢。

我想使用vh设置max-height，但是当我这样做时，视频会超过页面的其他内容（就像一个狂野的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;
}

---

这是视频，我还有另外一个问题，但我似乎无法找到任何关于它的信息...... 视频的控件位于视频的底部，因此您无法看到视频的一部分。 我想在视频下设置控件，是否可能？

Answer 1

正如Tushar Vaghela在评论中所述，这是shadow-dom（内置浏览器CSS，本质上）的一部分。

现在最好的解决方案是隐藏控件并使用简单的自定义控件。这是你需要的一切，由MDN提供。

• The code
• Live example
• Written guide

Answer 2

如果有帮助，请尝试将此css添加到您的视频标记中

video {
    object-fit: fill;
}

如果这对您不起作用，请尝试使用video.js，它将帮助您使用默认控件为视频播放器提供海关选项