Magnific Popup - 打开视频时出错

Question

无法在华丽的弹出窗口中播放视频。 当我使用

class=iframe

时，页面将重定向到 youtube 并播放视频。 但是当我使用

class=popup-youtube

时，弹出窗口会显示，但我收到以下错误消息：

找不到此网页

没有找到该网址的网页：

file://www.youtube.com/embed/AcnImfXjBHo?autoplay=1

错误 6 (net::ERR_FILE_NOT_FOUND)：找不到文件或目录。

这里是HTML代码：

<a class="popup-YouTube" href="HTTP://www.youtube.com/watch?v=AcnImfXjBHo">
                                Trial Master File Video</a>    

这是JS：

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

            fixedContentPos: false
        });
    });

我通过 IIS 在我的 PC 上本地运行它进行测试。我为单张图片、画廊图片和谷歌地图设置的其他链接可以很好地弹出。视频是唯一不起作用的。

Answer 1

确保您在服务器环境中运行此代码，或将

https:

添加到youtube src选项http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type

Answer 2

在 extend 函数中为每个弹出窗口添加代码，如下所示：

$.extend(true, $.magnificPopup.defaults, {  
    iframe: {
        patterns: {
           youtube: {
              index: 'youtube.com/', 
              id: 'v=', 
              src: 'http://www.youtube.com/embed/%id%?autoplay=1' 
          }
        }
    }
});

Answer 3

我用“v”参数发现的东西，我在核心文件“jquery.magnific-popup.js”中看到模式

patterns: {
    youtube: {
        index: 'youtube.com',
            id: 'v=',
            src: '//www.youtube.com/embed/%id%?autoplay=1'
        }
}

前端链接：

<a href="https://www.youtube.com/embed/YQHsXMglC9A" class="popup-youtube">youtube link</a>

我提供了指向 A 标签“https”网址的链接，但不起作用。

<a href="http://www.youtube.com/watch?v=YQHsXMglC9A" class="popup-youtube">youtube link</a>

我看到带有视频代码“YQHsXMglC9A”的有效 url“v”参数并且有效 :)
所以我们只需要改变“v”参数值。

Answer 4

啊！这花了我一段时间才弄清楚。 “popup-YouTube”类应该全部小写。

代替

<a class="popup-YouTube" href="https://www.youtube.com/watch?v=AcnImfXjBHo">
                                Trial Master File Video</a>

注意

YouTube

中的大写字母

应该是

<a class="popup-youtube" href="https://www.youtube.com/watch?v=AcnImfXjBHo">
                                Trial Master File Video</a>    

Answer 5

<a class="popup-YouTube" href="//www.youtube.com/watch?v=AcnImfXjBHo">
                                Trial Master File Video</a>

删除“HTTP：”或“HTTPS：”。问题在于，如果您的网站以 HTTP 打开并且您的弹出视频 URL 以 HTTPS 开头，那么它会将您重定向到该页面。