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

Question

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

而且我 喜欢使用 vh 来设置 max-height，但是当我制作视频时 超出页面的其他内容（像一个狂野的z-index）并且不像设置容器尺寸的子块那样工作...

有没有可能counter/avoid那样的效果？

简化的渲染方法：

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

Answer 2

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

video {
    object-fit: fill;
}

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

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

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

html

css

controls

html5-video

reactjs