Css 让全屏HTML5视频背景模糊正常工作？

我似乎已经尝试了书中的所有技巧，但没有任何效果

我有一个全屏，绝对定位HTML5视频背景，我需要模糊。不过，我希望它有锋利的边缘

到目前为止，我已经在网上尝试了大约20或30种不同的解决方案，但似乎没有任何效果

以下是我尝试过的：

-设置负边距

-设置负上、左、右、下页边距

-在隐藏溢出的容器中设置正边距

-在隐藏溢出的容器中设置

-此处注明的方法：---

以下是迄今为止的代码：

HTML

也许我做错了什么，我不太确定。我正在做的事情有没有妨碍它工作

提前感谢您的帮助

这是否符合您的需要

HTML

你可能想让视频比父视频大，并将其居中，我认为这将消除父视频边界内的白色模糊

你可能想让视频比父视频大，并将其居中，我认为这将消除父视频边界内的白色模糊

@Ashugeo，我接受了你的代码，按照你几年前的建议做了，看起来效果不错

---

不幸的是，这似乎不起作用。我还试着把视频做得更大，并将其居中，但似乎仍然不起作用

@Finn C，现在它似乎使用transform工作：

HTML

---

不幸的是，这似乎不起作用。我还试着把视频做得更大，并将其居中，但似乎仍然不起作用。但是，作为记录，它产生的结果与上面的代码相同，这是好的（做同样事情的代码少了一点！）我现在明白你的意思了。我已经尝试了很多方法，但嵌入的白色模糊总是出现在窗口的边界附近。为了证明这一点，我编辑了这支笔，并将视频放得更宽。现在我和你一样好奇。图像不是这样的，只有视频…@Ashugeo你删除了上面的笔吗？本打算看一看，但却收到了一条“找不到页面”的消息。@AndrewL64我想我可能……对此感到抱歉。这支笔没有达到预期的效果，我只是在证明这个问题…@Ashugeo 8月29日'15日19:40，我将你的笔重新创建为JSFIDLE:。它使用transform来放大视频，并让容器隐藏溢出的内容。这似乎是按要求做的。感谢你的工作笔，我甚至不知道我可以模糊视频D

<video id="videobcg" preload="auto" autoplay="true" loop="loop"     muted="muted" volume="0">
<source src="vid/myVid.mp4" type="video/mp4">
<source src="vid/myVid.webm" type="video/webm">
    Sorry, your browser does not support HTML5 video.
</video>

#videobcg {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100% !important;
    max-height: 100% !important;
    z-index: -1000;
    overflow: hidden;
    object-fit: fill;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
}

<div id="container">
    <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    Sorry, your browser does not support HTML5 video.
    </video>
</div>

#container {
  width: 640px;
  height: 360px;
  overflow: hidden;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
}

#videobcg {
  width: 100%;
  height: auto;
}

<div id="container">
    <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    Sorry, your browser does not support HTML5 video.
    </video>
</div>

body{ margin:0;}

#container {
    width: 100vw;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}
#videobcg {
    width: inherit;
    height: inherit;
    -o-filter: blur(15px);
    filter: blur(15px);
    object-fit: cover;
    transform: scale(1.04);
}