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

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

为该标签添加样式

溢出：隐藏

Answer 2

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

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

How do I remove borders and the scrollbar on a looping video background?

html

css