Question

我试图让整个屏幕充满mp4视频，但由于某种原因，底部有一个滚动条，侧面有一些空白

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="video-container">
            <video autoplay="" loop="" muted="" preload="metadata">
            <source src="space.mp4" type="video/mp4">Your browser does not support this video</video>
        </div>
    </body>
</html>

的CSS：

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); */
}

screenshot of bar at the bottom that isn't wanted

Answer 1

每个空白页面都有一些填充或边距，我确定没有查看，所以你可以使用：

糟糕的解决方案：

* {   margin: 0; padding: 0; }

或更好的解决方案

html, body {
  margin: 0; padding: 0;
}

使用*表示所有元素都适用于所有元素并且速度很慢。但对我来说有时html，身体不起作用。

您也可以尝试使用100vw and 100vh and box-sizing: border-box;

Answer 2

您的网站是否有链接？您也尝试将!important标记添加到溢出属性。

不应该存在的视频之间的差距（不需要的滚动条）

2 个答案: