Question

我正在尝试使用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处的文档，但我实际上并不理解，所以我不知道这是否对我有帮助。

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

Answer 1

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

Answer 2

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

我使用了你的代码＆amp;包括文件直接进入Javascript的正文。 您可能没有正确调用magnific-popup代码？

Magnific Popup - 不会播放视频

2 个答案: