如何使用Magnific Popup实现站内视频弹窗播放（非YouTube/Vimeo）

DevOps 小满

2026-8-12

如何用Magnific Popup弹窗播放自托管网站视频

我有一个上传到网站内部的视频，并非托管在YouTube或Vimeo平台，需要实现点击时通过Magnific Popup弹窗播放。现有视频标签代码如下：

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

我在CodePen上找到的示例大多针对YouTube或Vimeo，部分点击后会跳转到视频页面，不符合需求。后来找到一个Wistia视频的示例：

HTML部分：

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

JS部分：

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

我尝试用a标签包裹自己的video标签：

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

并修改JS中的URL：

$('.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里的正则表达式该怎么修改，也不确定用a标签包裹video标签是否正确，想知道正确的实现方法。

正确实现方法

1. HTML结构优化

不需要照搬第三方平台的a标签包裹逻辑，推荐两种更合理的结构：

直接给预览视频绑定触发事件（保留静音自动循环的预览效果）
用单独的触发元素（比如海报图），配合隐藏的弹窗视频模板

推荐结构一（保留预览视频）：

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

<!-- 弹窗内的视频模板，初始隐藏 -->
<div id="video-modal" class="mfp-hide">
  <video controls allowfullscreen style="width:100%;max-width:900px;">
    <source src="example.com/wp-content/uploads/2022/09/video_2022-09-10_20-34-47.mp4" type="video/mp4">
  </video>
</div>

推荐结构二（用海报图触发）：

<div class="video-popup-trigger" style="cursor:pointer;">
  <img src="example.com/wp-content/uploads/2022/08/37762310-play-icon.png" alt="Play Video" style="max-width:100%;">
</div>

<div id="video-modal" class="mfp-hide">
  <video controls allowfullscreen style="width:100%;max-width:900px;">
    <source src="example.com/wp-content/uploads/2022/09/video_2022-09-10_20-34-47.mp4" type="video/mp4">
  </video>
</div>

2. JavaScript实现（两种方案）

方案一：Inline弹窗类型（推荐，灵活可控）

直接调用Magnific Popup的inline类型，加载预先准备的视频元素，还能控制播放状态：

$('.video-popup-trigger').magnificPopup({
  type: 'inline',
  preloader: true,
  callbacks: {
    open: function() {
      // 弹窗打开时自动播放视频
      $('#video-modal video')[0].play();
    },
    close: function() {
      // 弹窗关闭时暂停并重置视频
      const video = $('#video-modal video')[0];
      video.pause();
      video.currentTime = 0;
    }
  }
});

方案二：Iframe弹窗类型（直接加载视频URL）

如果不想用inline模板，也可以直接用iframe加载视频文件，不需要自定义复杂的pattern：

$('.video-popup-trigger').magnificPopup({
  type: 'iframe',
  iframe: {
    markup: '<div class="mfp-iframe-scaler">' +
              '<div class="mfp-close"></div>' +
              '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
            '</div>'
  },
  callbacks: {
    open: function() {
      // 调整弹窗最大宽度，适配视频尺寸
      $('.mfp-container').css('max-width', '900px');
    }
  }
});

对应的HTML可以简化为：

<a class="video-popup-trigger" href="example.com/wp-content/uploads/2022/09/video_2022-09-10_20-34-47.mp4">
  <video muted autoplay 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>

3. 关键注意事项

不需要自定义第三方平台那样的pattern和正则表达式，因为你的视频是直接的静态MP4文件，不是第三方平台的媒体ID链接，正则在这里完全没用。
避免给触发元素和内部视频使用相同的class，防止事件绑定冲突，建议用video-popup-trigger这类专属class。
弹窗内的视频要添加controls属性，让用户能自主控制播放，预览视频保持静音自动循环即可。

内容的提问来源于stack exchange，提问作者libertarian