Question

我正在努力实现一个带有文本的整页模糊WebM。现在，我有（它在玉中）：

block content
.header
  .overlay
    video(autoplay="" loop="" muted="")
      source(src="/typing.webm")
      source(src="/typing.mp4")
      | Video not supported on your browser
  .jumbotron
    h1 Title

呈现HTML：

<div class="header">
  <div class="overlay">
    <video autoplay="" loop="" muted="">
      <source src="/typing.webm"/>
      <source src="/typing.mp4"/>Video not supported on your browser
    </video>
  </div>
  <div class="jumbotron">
    <h1>Title</h1>
  </div>
</div>

使用CSS：

body{
  margin: 0 auto;
}
.overlay {
   margin: 0 auto;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  opacity: 1;
  width: 100%;
}
.header {
  margin: 0 auto;
  height: 100vh;
}

视频是640x480，并没有在整个屏幕上延伸，而是保留了它的原始分辨率。有什么想法吗？

PS。我很擅长CSS。

Answer 1

添加此css可让您的视频响应。

video 
{
    width: 100%;
    height: auto;
    max-height: 100%;
}

Answer 2

要让视频贴合整个视口，您需要为视频元素本身添加宽度和高度样式。

现场演示：

＆＃13;

body{
  margin: 0 auto;
}
.overlay {
   margin: 0 auto;
  -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%;
}
.overlay > video {
    width: 100%;
    height: 100%;
}
.header {
  margin: 0 auto;
  height: 100vh;
}

＆＃13;

<div class="header">
  <div class="overlay">
    <video autoplay="" loop="" muted="">
      <source src="/typing.webm"/>
      <source src="/typing.mp4"/>Video not supported on your browser
    </video>
  </div>
  <div class="jumbotron">
    <h1>Title</h1>
  </div>
</div>

＆＃13;

使整个WebM模糊

2 个答案: