Blurred background video with defined edges

Question

This is a screenshot of my background video.

I tried to set negative margins to the video and overflow: hidden to the wrapper, as it's explained here, but it's not working... Perhaps because the video is position: fixed?

Here's the code:

#videowrapper {
    height: 100vh;
    background: black;
}

video {
    position: fixed; 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: 0;
    filter: blur(20px);
}

How can I blur the video while keeping the edges defined?

Answer 1

You can use a combination filter: blur() and backdrop-filter: blur() to create a cross browser solution.

body {
  margin: 0;
}

.container {
  --blur: 20px;
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  background: red;
}

.videobg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  object-fit: cover;
  display: block;
  overflow: hidden;
  @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    // firefox, ...
    filter: blur(var(--blur));
    object-fit: cover;
    top: calc(-2 * var(--blur));
    left: calc(-2 * var(--blur));
    height: calc(100% + 4 * var(--blur));
    width: calc(100% + 4 * var(--blur));
  }
}

.backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    // chrome, edge, safari, ...
    backdrop-filter: blur(var(--blur));
  }
}

<div class="container">
  <div class="backdrop"></div>
  <video class="videobg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="https://visionsbox.de/assets/cms/projects/3d-produktfilme/tevisio_DE.mp4" type="video/mp4">
    Sorry, your browser does not support HTML5 video.
  </video>
</div>

see jsfiddle