How to support youtube/vimeo embed on Equinox, Ascend and Elevate themes

let getVideoItems = () => {
    // create video items if doesn't exist
    if (w.videoItems === undefined) {
        w.videoItems = [];
 
        // regex for youtube and vimeo
        const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
        const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(\d+)/;
 
        $('[data-video]').each((i, v) => {
            let $this = $(v);
            let type = $this.attr('data-type');
            let index = parseInt($this.closest('.swiper-slide').attr('data-swiper-slide-index'));
            let videoHtml = '';
 
            // create video items
            // base on link and type
            if (type == 'url') {
                // url (mostly embedded)
                // check if youtube link
                if (youtubeRegex.test($this.attr('data-video'))) {
                    videoHtml = `
                        <div class="${cls}__video" data-plyr-provider="youtube" data-plyr-embed-id="${youtubeRegex.exec($this.attr('data-video'))[1]}"></div>
                    `;
                }
 
                // check if vimeo link
                if (vimeoRegex.test($this.attr('data-video'))) {
                    videoHtml = `
                        <div class="${cls}__video" data-plyr-provider="vimeo" data-plyr-embed-id="${vimeoRegex.exec($this.attr('data-video'))[1]}"></div>
                    `;
                }
            }
            else {
                // mp4 (default)
                videoHtml = `
                    <video class="${cls}__video" playsinline controls data-poster="${$this.find('img').attr('data-aios-lazy-src')}">
                        <source src="${$this.attr('data-video')}" />
                    </video>
                `;
            }
 
            w.videoItems[index] = {
                src: `
                    <div class="${cls}__item">
                        ${videoHtml}
                        <div class="${cls}__name">${$this.attr('data-name')}</div>
                    </div>
                `,
                type: 'inline',
            };
        });
    }
 
    return w.videoItems;
};

data-type="{{testimonial_video_type}}"

<div class="hpTestimonialsVideo__lists swiper">
    <div class="swiper-wrapper">
        [aios_testimonials with_video_only="yes"]
        <div class="swiper-slide">
            <div class="hpTestimonialsVideo__list" role="button" aria-pressed="false" data-video="{{testimonial_video_url}}" data-type="{{testimonial_video_type}}" data-name="{{testimonial_title}}">
                <div class="hpTestimonialsVideo__list--image">
                    <canvas width="1040" height="584.85"></canvas>
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-aios-lazy-src="{{testimonial_video_placeholder}}" width="1040" height="584.85" alt="video image placeholder" class="aios-lazyload">
                </div>
                <div class="hpTestimonialsVideo__list--name">
                    {{testimonial_title}}
                </div>
            </div>
        </div>
        [/aios_testimonials]
    </div>
</div>