CODEWITHSUNDEEP
htmlcssvideopadding
AZ Games
AZ Games

Reputation: 23

Gap between video that shouldn't be there (unwanted scrollbar)

I'm trying to have the whole screen filled up with a mp4 video, but for some reason theres a scroll bar at the bottom and a bit of whitespace on the side

html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="video-container">
            <video autoplay="" loop="" muted="" preload="metadata">
            <source src="space.mp4" type="video/mp4">Your browser does not support this video</video>
        </div>
    </body>
</html>

css:

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); */
}

screenshot of bar at the bottom that isn't wanted

Upvotes: 1

Views: 27

Answers (2)

user8517929
user8517929

Reputation:

Every blank page has some padding or margins I ain't sure wasn't looking into that so you can use:

bad solution:

* {   margin: 0; padding: 0; }

or better solution

html, body {
  margin: 0; padding: 0;
}

Using * means all so it will apply to all elements and it is slow. But for me sometimes html, body does not work.

Also you can try using 100vw and 100vh and box-sizing: border-box;

Upvotes: 1

ThisGuy
ThisGuy

Reputation: 21

Is there a link to your site? Also did you try adding the !important tag to the overflow property.

Upvotes: 0

Related Questions