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 提供。

• 代码
• 实例
• 书面指南