放大弹出窗口:尝试从内联弹出窗口调用YouTube iframe弹出窗口时出错

Magnific Popup: error trying to invoke a YouTube iframe popup from an inline popup

本文关键字：窗口 YouTube 调用 iframe 出错 放大      更新时间：2023-09-26

我正在使用Magnific Popup来显示带有图像和一些文本的内联模态。客户端现在想在这个内联模式中添加一个链接来观看视频，这个视频在一个新的模式弹出窗口中。

我们在整个网站上使用视频模式已经没有任何问题，然而，当链接在内联模式内时，黑色覆盖保持不变，内联模式按预期消失，但没有出现视频模式。

<a class="modal-youtube" href="https://www.youtube.com/watch?v=5r15IUNWhl8">Watch a Video</a>

在控制台中，它有这样的错误：

Error: Syntax error, unrecognized expression: https://www.youtube.com/watch?v=5r15IUNWhl8

作为参考，这里是我的javascript代码——不过，这都是文档中非常标准的东西。

$('.modal-youtube, .modal-vimeo, .modal-gmaps').magnificPopup({
    disableOn: 700,
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 160,
    preloader: false,
    fixedContentPos: false
});

$('.modal').magnificPopup({
        type: 'inline',
        preloader: false,
        showCloseBtn: true
  });

听起来Magnific Popup在重建YouTube链接以创建iframe时遇到了问题，但我不知道为什么除了在模式窗口内，它在其他地方都能工作。有什么想法吗？

我是放大弹出窗口的新手，我遇到了同样的问题：我的youtube src没有正确构建。我不是通过<a>标签启动弹出窗口，而是在<div>上启动。我可能不是在处理你的情况，但这是我给你的变通办法。我对此并不疯狂，但它奏效了。

// store the youtube url in a data- attribute as I build my page
$(section_item).data("yt",thisLink);
//section_item is my <div> where the magnific-popup spawns from
 $(section_item).magnificPopup({
      items:{
           src:$(section_item).data("yt")
      },
      type:'iframe',
      callbacks:{
           open:function({
                $("iframe").attr("src",$.magnificPopup.instance.currItem.src);
           }
      },
});

我看到一个坏的youtube src:

file://www.youtube.com/embed/ttps://www.youtube.com/embed/-fuulLKmxxg?autoplay=1

open回调是我强制纠正src的地方，在那里它被截断，从currItem.src:中调用它

https://www.youtube.com/embed/-fuulLKmxxg

我试着在文档中使用patterns对象，但我无法实现。希望这有点帮助。

相关文章：