Strange additional width on Video element wrapper-CodePudding

I'm wrapping a video tag in a div to position a few components relative to the video player no matter what size the video has. But I'm stuck failing to locate what's adding some extra width to my wrapper container.

.video-pop-up{
    display: none;
}
.video-pop-up.open{
    position: fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background: rgba(0,0,0,0.8);
    z-index: 99;
    display: grid;
    place-items: center;
}
.video-pop-up.open video{
    max-width: 95%;
    max-height: 95%;
}

.video-wrap{
    position: relative;
}

<div class="video-pop-up open">
  <div class="video-wrap">
    <video controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      </video>
    </div>
</div>

The container is this big:

and the video element itself is this big:

Can anyone see what is causing the added width of my wrapper container?

CodePudding user response：

.video-pop-up.open video{
    max-width: 95%;
    max-height: 95%;
}

This right here is what's causing that empty space. It's not padding or margin, it's the content box. In the child element (the video), you specified that the video only takes up 95% of the width of the parent container and 95% of the height of the parent container. So your parent container content-box now has 5% empty space width and 5% empty space height.

Change it to

.video-pop-up.open video{
    max-width: 100%;
    max-height: 100%;
}

or remove it altogether, and the video will take up all the space in the content-box of the .video-wrap container.

EDIT: punctuation.