javascript - Magnific-popup仅链接到youtube视频，而不显示在弹出窗口中

Question

我有一个视频链接，我想使用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个图像和播放按钮的部分。

感谢您的帮助!

Answer 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' 
});