How to set the video tag with Magnific popup? NOT from YOUTUBE or VIMEO

Question

I have a video, uploaded inside the site itself, not on youtube or vimeo, I need to show it in Magnific popup on click. It looks like

<video muted allowfullscreen autoplay class="video" loop poster="example.com/wp-content/uploads/2022/08/37762310-play-icon.png" style="max-width:100%;height:610.6px;">
   <source src="example.com/wp-content/uploads/2022/09/video_2022-09-10_20-34-47.mp4" type="video/mp4">
</video>

I found many examples on codepen, but mostly they are about videos from youtube or vimeo.

Or one that opened video redirecting me to the video's page - I don't need that.

I found something like I need html-part

<a class="video" href="https://home.wistia.com/medias/e4a27b971d">Open Wista video</a>

js-part

$('.video').magnificPopup({
  type: 'iframe',
  iframe: {
    patterns: {
      wistia: {
        index: 'wistia.com',
        id: function(url) {        
            var m = url.match(/^.+wistia.com\/(medias)\/([^_]+)[^#]*(#medias=([^_&]+))?/);
            if (m !== null) {
                if(m[4] !== undefined) {
                    return m[4];
                }
                return m[2];
            }
            return null;
        },
        src: '//fast.wistia.net/embed/iframe/%id%?autoPlay=1' // https://wistia.com/doc/embed-options#options_list
      }
    }
  }
});

I try to wrap my video to 'a' tag

<a class="video" href="example.com/wp-content/uploads/2022/09/video_2022-09-10_20-34-47.mp4">
   <video muted allowfullscreen autoplay class="video" loop poster="example.com/wp-content/uploads/2022/08/37762310-play-icon.png" style="max-width:100%;height:610.6px;">
      <source src="example.com/wp-content/uploads/2022/09/video_2022-09-10_20-34-47.mp4" type="video/mp4">
   </video>
</a>

Replace js urls into mine

$('.video').magnificPopup({
  type: 'iframe',
  iframe: {
    patterns: {
      wistia: {
        index: 'example.com',
        id: function(url) {        
            var m = url.match(/^.+site.com\/(medias)\/([^_]+)[^#]*(#medias=([^_&]+))?/);
            if (m !== null) {
                if(m[4] !== undefined) {
                    return m[4];
                }
                return m[2];
            }
            return null;
        },
        src: 'example.com/wp-content/uploads/2022/09/video_2022-09-10_20-34-47.mp4' 
      }
    }
  }
});

But what to do in var m - I don't understand. Is it even correct to wrap the 'video' tag in 'a' tag? Because of incorrect 'var m' I don't know do I even do a right thing. Maybe you already used Magnific with video?