想找到一种有循环视频背景的方法.始终完全覆盖屏幕.它的工作方式是我想要的,但当我将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>

推荐答案

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

Html相关问答推荐

未显示新组件的视图

在 Select 前后更改选项卡的背景

页脚与主要内容重叠

嵌套表列高度不是100%高度的问题

如何使用Reaction Js读取html文件中的代码

将导航项目底部边框与导航栏对齐

与窗高匹配的响应式正方形网格

Angular MatBadge 在高于 99 时不显示完整数字

将三个div转换为显示flex

样式化单选按钮 背景 colored颜色

Flex布局中,当父元素高度较高时,交叉轴上出现额外的空白问题.

如何避免链接在悬停 timeshift 动,同时增加导航栏中的字体大小?

CSS 随着内容宽度的增加而减少填充

从垫分页器中删除输入边框

W3Schools 幻灯片相同高度

我如何使用 CSS nth-child(odd) nth-child(even) 来对齐 CSS 网格中的列?

使用 R 中的 rvest 包获取搜索结果的第一个链接

在 React (NEXT) 中,当我try 进行动态补充时,我无法使用实例this来引用输入

圆形边框显示在该部分后面.怎么修?

如何在不删除

标记的情况下加入 HTML 中的段落