2

On my page, I have a video which I want to encompass the entirety of the webpage's screen. However as of right now, the user must scroll a little bit to reach the bottom, which is not what I want.

My JS:

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

My CSS:

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

#video-player {

}

I toyed around with adding CSS properties to video-player, but nothing did the trick, so that's why it's empty as of right now. Not sure what I need to tweak.

ihatestackoverflowsomuch2
  • 41
  • 5

1 Answers1

1

Give 100vh height to video player and hide it's overflow.

#video-container {
 position: relative;
 display: flex;
 width: auto;
 height: 100vh;
 overflow: hidden;
}
Awais Rafiq Chaudhry
  • 472
  • 3
  • 10