Vertical and horizontal scroll bars appearing for video on large screens-CodePudding

I have a problem where once the screen starts getting to a certain width, the video starts to grow past the height and width of the browser, and horizontal and vertical scroll bars appear. I've been struggling for hours trying to figure out how to fix it. Is there a way to keep the video full width and height on larger screens without overflowing?

You might not be able to answer this if you aren't on a screen big enough (although if you are good with dev tools, you can mimic a larger screen).

Here is a link to the full screen codesandbox, and here's a link to the codesandbox editor code.

I'll also include my code here, but it won't be much of use with Stacks built in editor and browser.

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
}

nav {
  background: black;
  height: 4em;
}

.player-group {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<html>
  <body>
    <nav></nav>

    <div class="player-group">
      <video>
        <source
          src="http://media.xiph.org/mango/tears_of_steel_1080p.webm"
          type="video/webm"
        />
      </video>
    </div>
  </body>
</html>

CodePudding user response：

Remove nav tag.
Remove .player-group -> padding-bottom and add height property

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>

    <style>
      body {
        height: 100vh;
        width: 100vw;
        margin: 0;
      }

      nav {
        background: black;
        height: 4em;
      }

      .player-group {
        position: relative;
        width: 100%;
        height: 100%;
      }

      video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div class="player-group">
      <video>
        <source
          src="http://media.xiph.org/mango/tears_of_steel_1080p.webm"
          type="video/webm"
        />
      </video>
    </div>
  </body>
</html>

CodePudding user response：

This might do the trick:

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    nav {
      background: purple;
      height: 4em;
    }
    
    .player-group {
      padding: 0px;
      margin: 0 auto 10px auto;
      background-color: greenyellow;
    }
    
    video {
      display: block;
      object-fit: contain;
      max-width: 100vw;
      max-height: 85vh;   /* value depends on nav height */
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <nav></nav>

  <div class="player-group">
    <video controls name="media">
        <source
          src="http://media.xiph.org/mango/tears_of_steel_1080p.webm"
          type="video/webm"
        />
      </video>
  </div>
</body>

</html>