html - 如何删除循环视频背景上的边框和滚动条？

Question

想要找到一种拥有循环视频背景的方法。它始终完全覆盖屏幕。它按照我想要的方式工作，但是当我将 vh 和 vw 增加到 100% 时，它添加了滚动条，并且视频周围仍然有填充和边距。我该如何解决这个问题？

<section class="container">

  <video class="fullscreen" 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>

Answer 1

默认情况下，您的浏览器会提供填充/边距。您可以尝试通过给予 margin 和 padding 0 来删除它: * { box-sizing:border-box; margin :0；填充:0； }至于隐藏滚动条，您可以使用overflow :hidden