Magnific-popup 只是指向 youtube 视频的链接，不会在弹出窗口中显示

Posted 2023-05-07

【中文标题】Magnific-popup 只是指向 youtube 视频的链接，不会在弹出窗口中显示

【英文标题】：Magnific-popup just links to youtube video, doesn't show in pop up

【发布时间】：2015-12-04 11:23:17

【问题描述】：

我有一个视频链接，我想使用 Magnific 在弹出窗口中打开它，但是当它点击时，它只是链接到 Youtube 网址。我怀疑某些 JS 代码没有被读取，但我返回 0 个错误。

目前我的 div 看起来像这样：

<a href="https://www.youtube.com/watch?v=pzot1TWuutY" class="magnific-youtube">
<span class="fa fa-play-circle"></span>
</a>

我的 JS 函数如下所示：

// Magnific JS
$( document ).ready(function()
$('.magnific').magnificPopup(
  type:'image',
  removalDelay: 300,
  mainClass: 'mfp-fade'
);

$('.magnific-youtube, .magnific-vimeo').magnificPopup(
  disableOn: 700,
  type: 'iframe',
  mainClass: 'mfp-fade',
  removalDelay: 300,
  preloader: false,
  fixedContentPos: false
);

我已链接到所有必需的文件，但似乎无法将插件添加到文件中。

Here is my demo of it 只需向下滚动到带有 3 张图片 + 播放按钮的部分。

感谢大家的帮助！

【问题讨论】：

当我点击第二张和第三张图片时，我什么也没有发生。这是故意的还是您在这里做了不同的事情？

不，代码现在只在第一个，我的错，应该提到它！

【参考方案1】：

更新

为你的 html 试试这个：

<div class="magnific-youtube">
<span class="fa fa-play-circle"></span>
  Open video
</div>

为你的 javascript 试试这个：

    $('.magnific-youtube').magnificPopup(
    items: 
      src: 'https://www.youtube.com/watch?v=pzot1TWuutY'
    ,
    type: 'iframe' 
);

【讨论】：

似乎什么也没做，我拉了href并保留了<a>标签，它只是点击但没有触发任何东西

奇怪的是，我也让它在我自己的 codepen 中运行，但是当我将它传输到我的站点时，它不想工作，哈哈。 codepen.io/TyStelmach/pen/gapzxX

我看到您的代码中有两个不同的 jquery 库。只用一个试试，我会使用这个 CDN：<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

我也会尝试使用 magnific javascript 的未缩小版本并禁用 carosel 脚本，看看是否有任何冲突。如果它在 codepen 中工作，则必须是导致问题的这些依赖项之一。

【参考方案2】：

尝试更改链接

https://www.youtube.com/watch?v=pzot1TWuutY

到

https://www.youtube.com/embed/pzot1TWuutY

将/watch?v= 更改为/embed/