Layout issues with element

by

Im having a layout issues with <video> element. The issue is that it overflows and adds a verticall scroll (at 1839px of width and above). At smaller resolutions it doesnt occur.I want everything to be aligned perfectly and fit in that 100vh .App container and no scroll being added.

I made a simple reproduction. You have to open rendered solution in another page to see the missalignment of .video-container element. Once you open that you can see button does not fit in 100vh.

code reproduction – https://codesandbox.io/p/sandbox/optimistic-river-5r5gq4?file=%2Fsrc%2FApp.js%3A6%2C26

rendered solution in another page – https://5r5gq4.csb.app/

  • Can you share an image of the problem? I opened the rendered solution, and it seems to work just fine—no vertical overflow at all.

    – 

  • At 1839px (and above) of width there is being vertical scroll added and thats the issue. There shouldn’t be any scroll added.

    – 

  • Ah, I get what you mean now.

    – 




The layout can be fixed by over-riding the ReactPlayer CSS.
Adding the following class .player to your component & stylesheet should allow the video and button to always fit in the screen regardless of the width of the screen:

//...
  <ReactPlayer
    className={"player"} // Add Class Name here
    controls
    url="..."
    width={"100%"}
    height={"calc(100% - 36px)"} /* Changed */
  />
  <button style={{ height: "36px" }}>Test</button> /* Added */
//...
.video-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 2;
    height: calc(100vh - 50px); /* Added */
}
.player {
    width: 100%; /* Changed */
    height: 100%; /* Changed */
    display: flex;
    flex: 1;
    background: black;
}

Leave a Comment