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!

Erik.J · Accepted Answer · 2019-01-21T20:24:51.820

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

Kudos for working pen, I didn't even know I can blur video! :D — vintprox, Mar 15 '19 at 12:05
The transfrom-method does not work anymore in chrome. Here is cross-browser solution based on backdrop-filter: https://jsfiddle.net/rttmax/psu0trm8/43/ — rttmax, Aug 26 '21 at 10:21

Hugo Sainte-Marie · Answer 2 · 2015-08-29T18:58:47.017

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.

edited Aug 29 '15 at 18:58

answered Aug 29 '15 at 18:46

Hugo Sainte-Marie

312
2
7

Unfortunately, this doesn't seem to work. I also tried making the video even bigger and centering it, still doesn't seem to work. For the record, however, the results it produces are the same as the code above, which is good (a bit less code to do the same thing!) – Finn C Aug 29 '15 at 18:57
Well I see what you mean now. And I've been trying numerous things, but that inset white blur always appears near window's border. I edited the pen and made the video wider to prove that, see http://codepen.io/Ashugeo/pen/bVbyNE. And now I'm just as curious as you. It doesn't behave that way with images, only videos... – Hugo Sainte-Marie Aug 29 '15 at 19:40
@Ashugeo Did you delete the above pen? Was going to have a look but got a "Page Not Found" message instead. – AndrewL64 Jan 20 '19 at 12:19
@AndrewL64 I think I might have… Sorry about that. The pen didn't have the expected result anyway, I was just proving the issue… – Hugo Sainte-Marie Jan 20 '19 at 13:05
@Ashugeo I just realised that this question is almost 4 years old lol CodePen probably auto-deletes old pens or something. – AndrewL64 Jan 20 '19 at 17:33
@AndrewL64 It might, or I might have. Sorry you didn't find an answer here! – Hugo Sainte-Marie Jan 20 '19 at 22:14
1

@Ashugeo Aug 29 '15 at 19:40, I recreated your pen as a JsFiddle: https://jsfiddle.net/Erik_J/6f483wm9/. It's using transform to scale up the video and let the container hide its overflow. That seems to work as requested. – Erik.J Jan 21 '19 at 20:00

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

2 Answers2