0

我正在尝试使用 Magnific 弹出窗口来显示 YouTube 视频。我有一个问题，当您单击链接时，什么都没有发生。没有错误消息，也不会恢复到备份行为（按照 YouTube 的链接）。

只需使用演示页面中的代码，并更新参考以适合我自己的文件结构：

<head>
  <link rel="stylesheet" href="/css/magnific-popup.css"> 

  <script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
  <script src="/js/magnific.min.js"></script> 

</head>

<body>

  <div class="example gc3">
    <h3>Popup with video or map</h3>
    <p>In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.</p>
    <div class="html-code">
      <a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a><br/>
  </div>

  <style type="text/css">
 /*** Simple fade transition*/
 .mfp-fade.mfp-bg {
 opacity: 0;
 -webkit-transition: all 0.15s ease-out; 
 -moz-transition: all 0.15s ease-out; 
 transition: all 0.15s ease-out;
 }
 .mfp-fade.mfp-bg.mfp-ready {
 opacity: 0.8;
 }
 .mfp-fade.mfp-bg.mfp-removing {
 opacity: 0;
 }
 .mfp-fade.mfp-wrap .mfp-content {
 opacity: 0;
 -webkit-transition: all 0.15s ease-out; 
 -moz-transition: all 0.15s ease-out; 
 transition: all 0.15s ease-out;
 }
 .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
 opacity: 1;
 }
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
 </style>
 <script type="text/javascript">
 $(document).ready(function() {
   $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
   disableOn: 700,
   type: 'iframe',
   mainClass: 'mfp-fade',
   removalDelay: 160,
   preloader: false,
   fixedContentPos: false
  });
 });
 </script>
 </div>
 </body>
 </html>

我在服务器上运行它，但在我的任何浏览器中都无法获得结果——Chrome、IE9、Safari、Fiefox。

我查看了http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_type上的文档，但我实际上并不理解它，所以我不知道这是否可以帮助我。

关于这里可能发生什么的任何提示？

4

2 回答 2

1

我也遇到了同样的问题，然后我意识到我下载了一个自定义构建的脚本，其中不包括 iframe 支持。后来我下载了完整版，一切都按预期工作。

于 2014-01-07T17:19:57.077 回答
0

http://jsfiddle.net/EF8EF/

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

我让它与您的代码一起使用，并将文件直接包含到 Javascript 的正文中。可能是您没有正确调用 magnific-popup 代码？

于 2013-10-29T09:26:19.597 回答