求助：使用magnific-popup无法播放YouTube视频及Reel

问题分析 #

当前代码直接使用type: 'iframe'加载YouTube内容，未适配YouTube专属的链接解析规则，导致普通视频加载异常，Reel（shorts）因链接ID提取失败出现加载报错（对应截图显示的加载失败问题）。

解决方案 #

1. 配置YouTube链接自动解析逻辑

替换原有JS代码，添加针对YouTube普通视频和Reel的链接解析规则，让插件自动生成合法的embed嵌入地址：

$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
  disableOn: 700,
  type: 'iframe',
  iframe: {
    patterns: {
      youtube: {
        index: 'youtube.com/',
        id: function(url) {
          // 同时兼容普通视频的v=参数和Reel的shorts链接格式
          var match = url.match(/(?:v=|shorts\/)([^&\/]+)/);
          return match ? match[1] : null;
        },
        src: 'https://www.youtube.com/embed/%id%?autoplay=1&mute=1'
      }
    }
  },
  mainClass: 'mfp-fade',
  removalDelay: 160,
  preloader: false,
  fixedContentPos: false
});

• 新增的iframe.patterns.youtube规则会自动识别并提取视频ID，避免手动拼接embed链接的格式错误。
• 添加mute=1是因为现代浏览器限制无用户交互的自动播放，静音模式可绕过该限制，测试正常后可根据需求调整为mute=0。

2. 确保页面链接格式正确

页面中的触发链接直接使用YouTube原始地址即可，插件会自动转换为嵌入地址，示例代码：

<a href="https://www.youtube.com/watch?v=F9kXstb9FF4" class="popup-youtube">测试视频</a>
<a href="https://www.youtube.com/shorts/XXXXXX" class="popup-youtube">测试Reel</a>

3. 基础环境检查

• 确保网站使用HTTPS协议，YouTube的embed接口仅支持HTTPS访问。
• 检查浏览器控制台是否有跨域相关报错，若存在，确认embed链接参数未被篡改。

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