how to apply back-drop filter to an svg using path

I have the following code and I am trying to blur part of the video element that the svg covers. I want it to blur the part that would be colored in if i set the "fill" property on the path.

<div
  style="width: 100%; height: auto; overflow: hidden; transform: scaleX(-1)"
>
  <div>
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      xml:space="preserve"
      style="enable-background: new 0 0 800 600"
      preserveAspectRatio="xMidYMin slice"
      viewBox="0 0 800 600"
    >
      <path
        d="M0,0v600h800V0H0z M401,549.5c-104.8,0-189.8-111.7-189.8-249.5S296.2,50.5,401,50.5S590.8,162.2,590.8,300S505.8,549.5,401,549.5z"
      ></path>
    </svg>
  </div>
  <video
    autoplay="autoplay"
    playsinline="playsinline"
    style="width: 760px; transform-origin: 0px 0px 0px"
  ></video>
  <div></div>
</div>

If i set "backdrop-filter:blur(10px)" on my svg the entire content is blurred but when i set the same on the path, it looks like nothing gets blurred. Does anybody know a workaround to this?