AR.jsでYoutube動画をARとして再生させたい

前提

AR.jsを使ってカメラをマーカーにかざすとサーバーにアップした動画が再生される機能を作りました。
しかし、これだと動画をサーバーにアップしなきゃいけないですね。
そこでYoutubeの動画を表示させたいのですが、videoタグに直接YoutubeのURLを入れてもではうまくいきません。再生されません。映像も出ません。
他に何か方法はないでしょうか？
videoタグにyoutubeが埋め込められればいいのですが、それが無理ならAR.jsでvideoタグ以外で動画を表示できる方法でYoutube動画が再生できる方法はないでしょうか？
自らも鋭意調査中です。

該当のソースコード

<!doctype html>
<html>
    <head>
    <meta charset="UTF-8">
        <script src="https://aframe.io/releases/1.0.4/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://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
        <script>
            AFRAME.registerComponent('videohandler', {
            init: function () {

                var marker = this.el;

                this.vid = document.querySelector("#vid");

                marker.addEventListener('markerFound', function () {
                    // this.vid.muted = false;
                    this.vid.play();
                    document.getElementById("volume").style.display = "block";

                }.bind(this));

                marker.addEventListener('markerLost', function() {
                    //this.vid.muted = true;
                    this.vid.pause();
                    // this.vid.currentTime = 0;
                    document.getElementById("volume").style.display = "none";

                }.bind(this));
            }
        });

        </script>
        
    </head>

    <body style="margin: 0; overflow: hidden;">
        <a-scene
            vr-mode-ui="enabled: false"
            device-orientation-permission-ui="enabled: false"
            embedded
            gesture-detector
        >
        
        <span id="volume" style="display: none;" onclick="toggleMute();">
        <svg id="unmuted" enable-background="new 0 0 448.046 448.046" viewBox="0 0 448.046 448.046" xmlns="http://www.w3.org/2000/svg"><path d="m358.967 1.614c-5.6-2.72-12.128-1.952-16.928 1.92l-155.648 124.512h-74.368c-17.664 0-32 14.336-32 32v128c0 17.664 14.336 32 32 32h74.368l155.616 124.512c2.912 2.304 6.464 3.488 10.016 3.488 2.336 0 4.704-.544 6.944-1.6 5.536-2.656 9.056-8.256 9.056-14.4v-416c0-6.144-3.52-11.744-9.056-14.432z"/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>
    </span>        
            <a-assets>
                <video
                    id="vid"
                    src="https://www.youtube.com/watch?v=x6iFF1IHzsI"
                    preload="auto"
                    response-type="arraybuffer"
                    loop
                    crossorigin
                    webkit-playsinline
                    muted
                    playsinline
                ></video>
                <audio src="videopath" autoplay></audio>
            </a-assets>

            <a-marker
                type="pattern"
                preset="custom"
                url="assets/marker.patt"
                videohandler
                smooth="true"
                smoothCount="10"
                smoothTolerance="0.01"
                smoothThreshold="5"
                raycaster="objects: .clickable"
                emitevents="true"
                cursor="fuse: false; rayOrigin: mouse;"
                id="markerA"
            >
                <a-video
                    src="#vid"
                    scale="1 1 1"
                    position="0 0.1 0"
                    rotation="-90 0 0"
                    class="clickable"
                    gesture-handler
                ></a-video>
            </a-marker>

            <a-entity camera></a-entity>
        </a-scene>
        
    </body>
</html>