Как сдружить video с magnific popup(НЕ С ЮТУБА)?

Question

[alexiusgrey]

У меня на самом сайте загружено видео, это не ссылка на ютуб, оно в библиотеке сайта. Мне надо,чтобы при клике на это видео оно открывалось магнификом.

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

На кодпене очень много примеров именно с ютубом и вимео, или если не оттуда, то при клике оно переходит а страницу вложения.

Нашел одно, похожее на то, что мне надо, копирую сюда.

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

$('.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
      }
    }
  }
});

Что я стараюсь сделать - пробую обернуть свое видео в ссылку, это вообще правильно делаю?

<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>

Ссылки тоже меняю на свои

$('.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' 
      }
    }
  }
});

Но вот не пойму с переменной var m = url.match(/^.+site.com\/(medias)\/([^_]+)[^#]*(#medias=([^_&]+))?/);
Что мне вставить вместо media/medias? И правильно ли вообще заменяю?
Поможет обвернуть видео тег в ссылку, или надо обращаться к source, поскольку src там?
Как правильно?
Или может есть другой способ и вариант записи? Нужен именн магнифик. На ютуб заливать не вариант, клиент не хочет.

Answer 1

[Игорь]

function extendMagnificIframe() {

        

        var $start = 0;
        var $iframe = {

            markup: '<div class="mfp-iframe-scaler">'+
            '<div class="mfp-close"></div>'+
            '<iframe class="mfp-iframe" frameborder="0" allow="fullscreen; picture-in-picture; encrypted-media;">   </iframe>'+
          '</div>', 


            patterns: {
                youtube: {
                    index: 'youtu',
                    id: function (url) {

                        var m = url.match(/^.*(?:youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*/);
                        if (!m || !m[1]) return null;

                        if (url.indexOf('t=') != - 1) {

                            var $split = url.split('t=');
                            var hms = $split[1].replace('h', ':').replace('m', ':').replace('s', '');
                            var a = hms.split(':');

                            if (a.length == 1) {

                                $start = a[0];

                            } else if (a.length == 2) {

                                $start = (+a[0]) * 60 + (+a[1]);

                            } else if (a.length == 3) {

                                $start = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);

                            }
                        }

                        var suffix = '?autoplay=1';

                        if ($start > 0) {

                            suffix = '?start=' + $start + '&autoplay=1';
                        }

                        return m[1] + suffix;
                    },
                    src: '//www.youtube.com/embed/%id%'
                },
                vimeo: {
                    index: 'vimeo.com/',
                    id: function (url) {
                        var m = url.match(/(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/);
                        if (!m || !m[5]) return null;
                        return m[5];
                    },
                    src: '//player.vimeo.com/video/%id%?autoplay=1&volume=10'
                },
                vk: {
                    index: 'vk.com/',
                    id: function (url) { return url; },

                    src: '%id%&autoplay=1&volum=2'
                },

                facebook: {
                    index: 'facebook.com/',
                    id: function (url) { return url; },

                    src: '//www.facebook.com/plugins/video.php?href=%id%&show_text=0&autoplay=1'
                },

                dailymotion: {
                    index: 'dailymotion.com/',
                    id: function (url) {
                        var m = url.match(/video\/([^"]*)/);
                        if (!m || !m[1]) return null;
                        return m[1];
                    },

                    src: '//www.dailymotion.com/embed/video/%id%?autoPlay=1'
                },

                kinescope: {
                    index: 'kinescope.io/',
                    id: function (url) {
                        var m = url.match(/io\/([^"]*)/);
                        if (!m || !m[1]) return null;
                        return m[1];
                    },

                    src: 'https://kinescope.io/embed/%id%?autoplay=1',
                    allow: 'autoplay'
                }
            }
        };

        return $iframe;

    }

    $('.item-video').magnificPopup({
        delegate: 'a',
        type: 'iframe',
        iframe: extendMagnificIframe()
    });

Comments

[alexiusgrey]

это про ютуб и вимео я тоже находил, а с обычным видео что делать?