我正在使用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
对象,但我无法实现。希望这有点帮助。