Question

我已经看过关于此事的其他帖子，所提出的建议并未解决问题。有些帖子甚至没有答案。我在一篇文章中将其作为答案发布，并且已删除两次。如果开发人员可以帮助我，我将不胜感激，因为这是他指示提出问题的地方。

我有所有的js文件，图像弹出窗口工作得很好（个人和画廊）。对于videop弹出窗口，我将此脚本添加到页面中：

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

    fixedContentPos: false
});

}）;

此视频链接的代码：

<a class="popup-youtube" href="http://www.youtube.com/watch?v=qdMexQCi5-Q">Video</a>

弹出窗口打开，但视频无法播放。据我所知，youtube链接是正确的 - 我按照Dimitry的说明进行了清晰的链接（例如https://www.youtube.com/watch?v=qdMexQCi5-Q和http://www.youtube.com/watch?v=qdMexQCi5-Q，但都不起作用）。我的JS文件夹中的“jquery-1.2.6.min.js”文件可能太旧了。我在哪里可以找到更新版本？看着，找不到它。这里完全是自学成才的网站建设者，在解释它是什么时，请使用简单的语言我做错了。提前谢谢。

Answer 1

您是否阅读了this，它谈到让您的代码在服务器环境中运行或使用 https：// ？正如你所说，你跟着Dmitrys＆＃39;教程;他正在他的代码中使用我们所谓的协议相对URL （以＆＃34; //＆＃34;开头的URL），因此如果您在本地运行代码（只需打开.html）使用您的浏览器的文件）这将无法正常工作。您应该使用Chris So给出的解决方案明确强制http://或https://而不是//协议相对URL。

Answer 2

看起来像magnificPopup的依赖关系是jQuery 1.7.2或更高版本。 http://plugins.jquery.com/magnific-popup/

您可以从jQuery webiste更新到更新的版本 http://jquery.com/download/ 或在线引用文件

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script

Answer 3

尝试一下。我希望这会有所帮助。

$(document).ready(function() {

$('.free_video_popup').magnificPopup({
    type: 'iframe',
    // other options
    iframe: {
        markup: '<div class="mfp-iframe-scaler">'+
                  '<div class="mfp-close"></div>'+
                  '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '</div>', 

        patterns: {
          youtube: {
            index: 'youtube.com/', 

            id: 'v=',

            src: 'https://www.youtube.com/embed/%id%' 
          },


        },

        srcAction: 'iframe_src', 
      }
  });

});

Answer 4

您需要将链接从http://www.youtube.com/watch?v=qdMexQCi5-Q调整为http://www.youtube.com/embed/qdMexQCi5-Q，将/ watch？=更改为/ embed /

Magnific popup youtube视频无法加载

4 个答案: