无法加载宏伟的弹出式 youtube 视频

Posted 2023-05-07

【中文标题】无法加载宏伟的弹出式 youtube 视频

【英文标题】：Magnific popup youtube video doesn't load

【发布时间】：2015-01-08 03:47:32

【问题描述】：

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

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

$(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”文件可能太旧了。我在哪里可以找到更新的版本？看了又找不到。这里完全是自学的网站建设者，请在解释我做错了什么时使用简单的语言。 提前谢谢你。

【参考方案1】：

您是否阅读过this，它谈到了让您的代码在服务器环境中运行或使用https://？正如您所说，您遵循了 Dmitrys 的教程；他在他的代码中使用了我们所说的protocol-relative URL（以“//”开头的URL），所以如果你在本地运行你的代码（只需用你的浏览器打开.html文件）这个不管用。您应该使用Chris So 给出的解决方案，明确强制使用http:// 或https:// 而不是// 协议相对URL。

【讨论】：

谢谢 Yash，我确实读过了。我还没有在服务器上，我正在我的电脑上编写/构建站点，所以它还没有上传，但我确实在 youtube 链接（和 http://）上写了 https:// - 仍然是视频不显示。也看到了 Chris So 解决方案，但我不知道扩展函数是什么（告诉你我是代码文盲......！）我在哪里可以找到？

【参考方案2】：

似乎 magnificPopup 的依赖项具有 jQuery 1.7.2 或更高版本。 http://plugins.jquery.com/magnific-popup/

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

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

【讨论】：

更新 jquery 并没有解决问题。无论如何，谢谢你的回答。

【参考方案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', 
      
  );

);

【参考方案4】：

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