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