消除模糊效果后html视频中的空白_Html_Css

消除模糊效果后html视频中的空白

html css

消除模糊效果后html视频中的空白,html,css,Html,Css,我正在尝试制作一整页的视频。（有点像，不过是一个视频）我现在有这个，但正如你所能看到的，还有很多空白。这是HTML文件： <!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="/css/all.min.css"> </head> <body>

我正在尝试制作一整页的视频。（有点像，不过是一个视频）我现在有这个，但正如你所能看到的，还有很多空白。这是HTML文件：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="/css/all.min.css">
  </head>
  <body>
    <div class="header">
      <video autoplay="" loop="" muted="" class="overlay">
        <source src="/typing.webm">
        <source src="/typing.mp4">WebM Not supported on your browser
      </video>
      <div class="jumbotron">
        <h1>Test</h1>
      </div>
    </div>
    <script src="/js/all.min.js"></script>
  </body>
</html>

另外，我想知道如何在某个时候把“jumbotron”放在视频的顶部，但是现在，让视频播放更重要

body{
  margin: 0;
  background-color: #000;
}
.overlay {
  margin: 0;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  opacity: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-top: -8vh;
}

.overlay video {
  min-width: 100%;
  min-height: 100%;
}

.header {
  margin: 0;
  height: 100vh;
}