javascript - animating a translucent and blurred rectangle all over the screen on top of a video

Question

I want a div translucent on top of a video running in background which is fade in (I mean animating) using a function. So we have this:

Here is the code I've found so far but nothing happens after execution of the function:

How can I fix this?

setTimeout(() => {
  const overlay = document.getElementById("overlay");
    overlay.classList.add("focused");
}, 5000);

.focused {
  animation: focusedShow 0.25s ease-in-out;  
  animation-fill-mode: forwards ;
}

@-webkit-keyframes focusedShow {
  0%    {  backdrop-filter: blur(0) }
  100%  {  backdrop-filter: blur(100px) }
}


video {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.clip-container {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0b0e12;
  z-index: 9;
}


#overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #555;
  opacity: 0.5;
  z-index: 10000;
  top: 0;
  left: 0;
}

<div class="clip-container">
        <div class="container">
     
          <div class="content">
         <div id="overlay"></div>
            <video id="clipe" autoplay="true" loop>
      <source src="http://optus-sport-prod-design.s3.amazonaws.com/saleshero/video/WWC_BANNER_720p_v2.mp4" type="video/mp4" type="video/mp4">
       </video>
          </div>
        </div>
</div>

Answer 1

Applying backdrop-filter on the element you want to blur won't blur it. It will make elements behind it blurry. To make the element itself blurry, just use filter.

I changed the @-webkit-keyframes to just @keyframes as it is compatible with Chrome. You may implement both.

Using backdrop-filter

What you need for this effect is a designated blur-overlay that will always be on top of the first positioned ancestor (in this case, it would be the clip-container as it has position: absolute;).

setTimeout(() => {
  addBlurOverlay();
}, 5000);

function addBlurOverlay() {
  const clip = document.querySelector(".blur-overlay");
  clip.classList.add("focused");
}

.focused {
  background-color: rgba(0, 0, 0, .5);
  animation: focusedShow 0.25s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes focusedShow {
  from {
    backdrop-filter: blur(0);
  }
  to {
    backdrop-filter: blur(100px);
  }
}

video {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.blur-overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  background: none;
}

.clip-container {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0b0e12;
}

<div class="clip-container">
  <div class="container">
    <div class="content">
      <div class="blur-overlay"></div>
      <video id="clip" autoplay="true" loop>
      <source src="http://optus-sport-prod-design.s3.amazonaws.com/saleshero/video/WWC_BANNER_720p_v2.mp4" type="video/mp4" type="video/mp4">
       </video>
    </div>
  </div>
</div>