javascript - 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;
}