Mind-ARで指定したマーカーにカメラをかざしても映像が表示されない

実現したいこと

min-arを使用して、クロマキーで抜いた動画を表示させ再生させたい。

前提

下記のサイトを参考に、ARで動画の表示と再生をさせたいです。
https://www.kageori.com/2023/03/mindararwebar2.html

サイトのサンプルソースをそのまま実行させた場合、マーカーに
スマホカメラをかざすと青い四角がきちんと表示されます。

発生している問題・エラーメッセージ

しかし、クロマキーなどを実現するためのライブラリを追加し
aframe.min.jsをバージョンアップさせたものを記述し、
a-assets直下に動画のリンク等を記述し、
a-entity直下にクロマキー等の指定をして実行してみると
ARのターゲティングが消えるのでマーカー自体は認識してるようですが
動画は表示されません。

※マーカーにかざす前

※マーカーにかざした後

該当のソースコード

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
    <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.1/dist/mindar-image-aframe.prod.js"></script>
    <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
    <script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>

  </head>
  <body>
    <a-scene mindar-image="imageTargetSrc: ./targets.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
    
    <a-assets> 
            <video
                    id="vid"
                    src="assets/asset.mp4"
                    preload="auto"
                    response-type="arraybuffer"
                    loop
                    crossorigin
                    webkit-playsinline
                    muted
                    playsinline
                ></video>
                <audio src="videopath" autoplay></audio>

            </a-assets>
    
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity mindar-image-target="targetIndex: 0">
        <a-video
                    material="shader: chromakey; src: #vid; color: 0.1 0.9 0.2""
                    width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"
                    class="clickable"
                    gesture-handler"
                ></a-video>
                </a-entity>
    </a-scene>
  </body>
</html>

試したこと

試しにクロマキー部分の記述

<a-video
                    material="shader: chromakey; src: #vid; color: 0.1 0.9 0.2""
                    width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"
                    class="clickable"
                    gesture-handler"
                ></a-video>

この部分を削除して試してみますたが結果は動画の表示はされずでした。