Cannot get my video-background to stay the same when resizing screen-CodePudding

I'm new at CSS. I'm testing out video backgrounds at the moment and I'm unable to have the video background stay the same size when I resize my screen smaller or open my dev tools. The background becomes smaller whenever I make my screen smaller.

This is what the background looks like when the screen is smaller

Can anyone help me figure out how to make my video background responsive and make it stay the same size no matter the size of the screen, please?

This is the styling I currently have for my video background:

    video {
      z-index: -1000;
      left: 50%;
      max-width: 100%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    .showcase {
      display: block;
      height: auto;
      overflow: hidden;
      position: relative;
      padding-bottom: 100%;
    }

I do not have any styling for my body. And my video tag sits inside showcase tag.

This is how my video background is being rendered:

function Main() {
  return (
    <>
      <section id="showcase">
        <video src="clouds.mp4" muted loop autoPlay></video>
        <QuoteBox />
      </section>
    </>
  );
}

CodePudding user response：

Different viewports will have differing aspect ratios and so the video will not always fit exactly inside without some space at the top/bottom or the sides.

As it is more important in this case to have the video filling the whole screen, this snippet illustrates using CSS object-fit: cover on the video element with the dimensions set to the whole viewport.

video {
  z-index: -1000;
  left: 50%;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.showcase {
  display: block;
  height: auto;
  overflow: hidden;
  position: relative;
  padding-bottom: 100%;
}

<section id="showcase">
  <video src="https://www.w3schools.com/html/mov_bbb.mp4" muted loop autoPlay></video>
</section>