Getting a full-screen HTML5 Video Background Blur to work?

Question

I've seemed to try all the tricks in the book here, and nothing's working.

I have a full-screen, absolute positioned HTML5 video background that I need to blur. However, I'd like it to have sharp edges.

I've tried around 20 or 30 various solutions online so far, and nothing has seemed to work.

Here's what I've tried:

-Setting negative margins

-Setting negative top, left, right, bottom margins

-Setting positive margins in a container with overflow hidden

-Setting in a container with overflow hidden

-Methods noted here: Defined Edges With CSS3 Filter Blur - Defined Edges With CSS3 Filter Blur - CSS blur and retain sharp edges using absolute div - Blur absolute background whilst retaining solid edges - http://volkerotto.net/2014/07/03/css-background-image-blur-without-blury-edges/

Here's the code so far:

HTML

<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>

CSS

#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);
}

Maybe I've done something totally wrong, I'm not quite sure. Is there anything I'm doing that's preventing it from working?

Thanks in advance for any help!

Answer 1

You might want to make that video bigger than the parent and center it inside it, I think that would get rid of that white blur inside the borders of the parent.

@Ashugeo, I took your code and did what you suggested years ago and it seems to work.

Unfortunately, this doesn't seem to work. I also tried making the video even bigger and centering it, still doesn't seem to work.

@Finn C, Nowadays it seems to work using transform: https://jsfiddle.net/Erik_J/6f483wm9/

HTML

<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>

CSS

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);
}

Answer 2

Would this pen fit your needs?

HTML

<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>

CSS

#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;
}

You might want to make that video bigger than the parent and center it inside it, I think that would get rid of that white blur inside the borders of the parent.