Question 303007 in Html Question posted in
Some basic documentation can be found here.

Html – Layout issues with <video> element

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/

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    I don’t see the vertical scroll that you’re talking about on codesandbox and on the pop-up live page, but I do see the two white columns on the left and right side of the video.

    Try adding this to your CSS:

    .player > video {
  object-fit: cover;
}

    You can also do object-fit: fill, it will compress the video vertically, but it actually looks pretty good, so it’s up to you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search