Fancybox 使用 youtube api 打开空白页面答案

【问题标题】：Fancybox opens blank page with youtube apiFancybox 使用 youtube api 打开空白页面
【发布时间】：2013-01-20 13:03:28
【问题描述】：

当我添加类似的链接时，Fancybox 工作正常 “http://www.youtube.com/embed/WQNQU_EQy6I” 但我正在从 youtube 频道获取视频，视频的链接就像 “http://www.youtube.com/watch?v=Neff9scaCCI&feature=youtube_gdata” 而fancybox 无法使用这些链接。

请帮忙。

JS-

<script type="text/javascript">
            $(document).ready(function() {
                $(".various").fancybox({
                    maxWidth    : 800,
                    maxHeight   : 600,
                    fitToView   : false,
                    width       : '70%',
                    height      : '70%',
                    autoSize    : false,
                    closeClick  : false,
                    openEffect  : 'elastic',
                    closeEffect : 'none'
                });
            });
</script>

HTML -

<a class="various fancybox.iframe" href="http://www.youtube.com/watch?v=Neff9scaCCI&feature=youtube_gdata">Video</a>

解决方案： 我用它来解决问题。 $vd 将视频的 url 存储在其中，通过此代码，我将该链接转换为工作链接。

$vd = preg_replace('/.+(\?|&)v=([a-zA-Z0-9]+).*/', 'http://youtube.com/embed/$2', $vd);

然后用它

<a class="various fancybox.iframe" href="<?php echo $vd;?>">Video</a>

希望它能帮助像我这样寻找解决此问题的方法的人。

【问题讨论】：

如果您刚刚添加了 fancybox 媒体助手，您的解决方案可能会更简单......检查stackoverflow.com/a/10972551/1055987
我试过了，但也没用。

标签： javascript fancybox youtube-api

【解决方案1】：

您需要使用 fancybox 媒体功能。尝试将您的 JS 更改为：

    $(document).ready(function() {
    $('.fancybox-media').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        helpers : {
            media : {}
        }
    });
});

并尝试将链接更改为：

<a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Video</a>

欲了解更多信息，请查看fancybox 网站：http://www.fancyapps.com/fancybox/#examples

我希望这会有所帮助！

【讨论】：