I have a video on my webpage that I want to take up the entire screen, but currently, users have to scroll a bit to reach the bottom, which is not ideal.
This is my JavaScript:
<div id="page">
<div id="video-container">
<ReactPlayer
id="video-player"
playing
url={flower}
width='100%'
height='100%'
muted={true}
loop
/>
</div>
</div>And this is my CSS:
#video-container {
position: relative;
display: flex;
width: auto;
height: auto;
}
#video-player {
}I tried adding CSS properties to the video player, but nothing seemed to work. That's why it's empty right now. I'm not sure what adjustments I need to make.