Question

我正在使用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时遇到了问题，但我不知道为什么除了在模态窗口内部以外它在其他地方工作。有什么想法吗？

Answer 1

我是一个全新的popific-popup，我遇到了同样的问题：我的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

我尝试在documentation中使用patterns对象，但我无法使用它。希望这有点帮助。

Magnific Popup：尝试从内联弹出窗口调用YouTube iframe弹出窗口时出错

1 个答案: