backdrop-filter firefox bug

Showcasing backdrop filter failing when embed is present

HTML

<nav class="navbar">TEST TEXT</nav>
<content-container>
  <img src="https://w.wiki/64tg"/>
  <div class="takespace"></div>
  <img src="https://w.wiki/64tg"/>
  <iframe src="https://www.youtube.com/embed/B4Kn3djJMCE?rel=0" class="embedVideo-iframe"></iframe>
  <img src="https://w.wiki/64tg"/>
  <div class="takespace"></div>
   <img src="https://w.wiki/64tg"/>
  <div class="takespace"></div>
</content-container>

CSS

.navbar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 1;
  backdrop-filter: grayscale() saturate(180%) brightness(50%) blur(50px);
  border-bottom: 1px solid rgb(0,0,0);
  background-color: rgba(0,255,0,0.1);
}

content-container {
  display: block;
  width: 500px;
}

div.takespace {
  height: 1000px;
}

img {
  width: 100%
}

.embedVideo-iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
}