Fancybox回归”无法加载请求的内容。请稍后再试。”

Question

使用 Fancybox 来在模式框中播放 YouTube 视频。

我的问题是我不断收到“无法加载请求的内容。请稍后重试。”

模式框弹出，所以我知道脚本正在运行，这可能是我的 API 调用有问题...这是我的调用：

<script type="text/javascript">
$(document).ready(function() {

            /* This is basic - uses default settings */

            $("a.fancybox").fancybox({
                'hideOnContentClick': true
            });

            /* This is a non-obtrustive method for youtube videos*/

            $("a[rel=fancyvideo]").fancybox({
                overlayShow: true,
                frameWidth:640,
                frameHeight:360,
            });
        });
</script>

Answer 1

您是否有同时包含 class="fancybox" 和 rel="fancyvideo" 的 ？如果这样做，那么您将两次将 Fancybox 绑定到这些元素，而 Fancybox 可能不喜欢这样。尝试取出这个：

$("a.fancybox").fancybox({
    'hideOnContentClick': true
});

然后看看仅使用第二个会发生什么。

更新：奇怪。该演示 (http://chadly.net/demos/video-lightbox.html) 生成的 HTML 与您的页面不同，演示构建了一个

type: 'swf'

在您的 Fancybox 绑定中，这就是 内容的来源。但是，href 指向普通的旧 YouTube 视频观看 HTML 页面，并且 href 最终作为 < 的 src 属性;嵌入>。用于嵌入 YouTube 视频的 URL 与视频的 HTML 页面不同，这可能是问题的根源。

的 href 替换为：

http://www.youtube.com/watch?v=QmVvgSfdmJQ

尝试将如下所示

http://www.youtube.com/embed/QmVvgSfdmJQ

第一个是 YouTube 的纯 HTML 页面，第二个是可嵌入的 SWF。

更新 2：您使用的示例适用于 Fancybox 1.0.0，但您使用的是 1.3.4，1.0.0 对 YouTube 进行了一些特殊检查，这些检查在更高版本中不存在：

//...
} else if (url.match(/youtube\.com\/watch/i)) {
//...

这是从 1.0.0 开始的，else if 之后的代码将 HTML 页面 URL（例如 http://www.youtube.com/watch?v=QmVvgSfdmJQ）重写为旧的可嵌入 SWF URL（例如 http://www.youtube.com/v/QmVvgSfdmJQ）。此版本问题还解释了为什么演示生成的 HTML 与您的不同。

因此，除了其他问题之外，您还存在一些版本问题。

Answer 2

检查您是否已包含 jquery.fancybox-media.js

<script type="text/javascript" src="jquery.fancybox-media.js?v=1.0.0"></script>

Answer 3

看起来您的代码可能略有偏差

<script type="text/javascript">
    $(document).ready(function() {
        $("a[@rel*=fancyvideo]").fancybox({
            overlayShow: true,
            frameWidth:640,
            frameHeight:360
        });
    });
</script>

http://chadly .net/post/2009/01/29/Lightbox-for-YouTube-Videos.aspx

Answer 4

使用此示例不要忘记 href

<a class="fancybox" href="your path for image or other">
  <img src="imagepath">
</a>