wanted to find a way to have a looping video background. which always fully covers the screen. It works how I want it to rn, but when I increased the vh and vw to 100% it added scroll bars and still has padding and a margin around the video. How can I fix this?

<section >

  <video  src="comp1.mp4" playsinline autoplay muted loop>
  </video>

<style media="screen">


  video.fullscreen {
  position: absolute;
  z-index: 0;
  object-fit: cover;
  width:100%;
  height:100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);


  &::-webkit-media-controls {
     display:none !important;
  }
}

.container {
   position: relative;
   display: grid;
   place-items: center;
   margin: 0 auto;
   height: 100vh;
   width: 100vw;

   background: #ccc;
}

.content {
  z-index: 1;
}

body {
   height: 100vh;
   display: grid;
   place-items: center;
}
</style>

CodePudding user response：

As default you browser gives padding/margin. You can try to remove it by giving margin and padding 0: * { box-sizing:border-box; margin: 0; padding: 0; } as to hiding scroll bar you can use overflow : hidden

CodePudding user response：

add style to that tag

overflow:hidden