ReactPlayer 高度缩放以适应页面以外的内容

Question

在我的页面上，我有一个视频，我想包含整个网页屏幕。但是现在，用户必须滚动一点才能到达底部，这不是我想要的。

我的 JS：

        <div id="page">
            <div id="video-container">
                <ReactPlayer 
                        id="video-player"
                        playing
                        url={flower} 
                        width='100%'
                        height='100%'
                        muted={true}
                        loop
                />
            </div>
        </div>

我的CSS:

#video-container {
  position: relative;
  display: flex;
  width: auto;
  height: auto;
}

#video-player {

}

我试过向视频播放器添加 CSS 属性，但没有任何效果，所以这就是为什么它现在是空的。不确定我需要调整什么。

Answer 1

给视频播放器 100vh 高度并隐藏它的溢出。

#video-container {
 position: relative;
 display: flex;
 width: auto;
 height: 100vh;
 overflow: hidden;
}

ReactPlayer 高度缩放以适应页面以外的内容

ReactPlayer height scales to fit more than the page

javascript

css

reactjs

react-player