The transparent background of video is glitching

[Rico Muhammad Nashrullah]

I use webm video that has alpha channel, when the video is playing, the background is glitching like the screenshot above.

here is my full code:
`

<style>
  body {
    margin: 0;
    overflow: hidden;
  }
  a-scene {
    height: 100vh;
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/dist/mindar-image-aframe.prod.js"></script>
<script src="https://unpkg.com/aframe-transparent-video-shader@1.0.6/dist/aframe-transparent-video-shader.umd.js"></script>

  <a-assets>
    <video id="videoPreview" preload autoplay loop>
      <!-- <source src="./assets/Preview.mp4" type="video/mp4" /> -->
      <source src="./assets/Tes2.webm" type="video/webm" />
    </video>
  </a-assets>

  <a-entity
    mindar-image-target="targetIndex: 0"
    position="0 0 -5"
    transparent="true"
    id="videoPlane"
  >
    <a-video
      src="#videoPreview"
      width="1"
      height="1.8"
      rotation="0 0 0"
      scale="1 1 1"
      transparent="true"
    ></a-video>
  </a-entity>
</a-scene>

<script>
  const scene = document.querySelector("a-scene");
  const video = document.querySelector("#videoPreview");
  const target = document.querySelector("#videoPlane");

  target.addEventListener("targetFound", () => {
    video.play();
  });

  target.addEventListener("targetLost", () => {
    video.pause();
  });
</script>

`