Javascript 使用fancy box获取“无法加载请求的内容”（但控制台中没有错误）

我正在使用fancybox创建一个简单的vimeo弹出窗口：

以下是我的jQuery：

$(".fancybox").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    padding: 0
});

这是我的HTML：

<a class="fancybox" href="http://vimeo.com/5319920">
    <img class="video_preview" src="/assets/home/video_preview.png">
</a>

问题是，如果没有任何记录错误，则无法加载请求的内容。很明显，脚本正在被调用

这里会发生什么，有什么想法吗？我完全不知所措

---

谢谢

可能会有一些问题，但我知道以下方法应该有效：将href更改为：

//player.vimeo.com/video/36031564?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1

或

并添加数据fancybox type=iframe

演示：

---

可能会有一些问题，但我知道以下应该可以解决：将href更改为：

//player.vimeo.com/video/36031564?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1

或

并添加数据fancybox type=iframe

演示：

---

如果您正在本地计算机上尝试此操作，则外接程序可能正在尝试使用链接访问视频

file://player.vimeo.com/video/5319920?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1

您可以通过提供以@lucuma所回答的完整URL开头的URL或更改$.fancybox.helpers.media.beforeLoad方法来更改此设置。此方法为包括vimeo在内的许多web站点提供支持。此方法会覆盖您提供的href，例如它会转换

如果您正在本地运行

file://player.vimeo.com/video/5319920?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1

尝试更改media.beforeLoad函数，如下所示，在最后一行中添加http://to href，应该可以使用

$.fancybox.helpers.media.beforeLoad = function(opts, obj) {
    var href = obj.href || '',
        type = false,
        rez;

    if ((rez = href.match(/(youtube\.com|youtu\.be)\/(v\/|u\/|embed\/|watch\?v=)?([^#\&\?]*).*/i))) {
        href = '//www.youtube.com/embed/' + rez[3] + '?autoplay=1&autohide=1&fs=1&rel=0&enablejsapi=1';
        type = 'iframe';

    } else if ((rez = href.match(/vimeo.com\/(\d+)\/?(.*)/))) {
        href = '//player.vimeo.com/video/' + rez[1] + '?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1';
        type = 'iframe';

    } else if ((rez = href.match(/metacafe.com\/watch\/(\d+)\/?(.*)/))) {
        href = '//www.metacafe.com/fplayer/' + rez[1] + '/.swf?playerVars=autoPlay=yes';
        type = 'swf';

    } else if ((rez = href.match(/dailymotion.com\/video\/(.*)\/?(.*)/))) {
        href = '//www.dailymotion.com/swf/video/' + rez[1] + '?additionalInfos=0&autoStart=1';
        type = 'swf';

    } else if ((rez = href.match(/twitvid\.com\/([a-zA-Z0-9_\-\?\=]+)/i))) {
        href = '//www.twitvid.com/embed.php?autoplay=0&guid=' + rez[1];
        type = 'iframe';

    } else if ((rez = href.match(/twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i))) {
        href = '//twitpic.com/show/full/' + rez[1];
        type = 'image';

    } else if ((rez = href.match(/(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i))) {
        href = '//' + rez[1] + '/p/' + rez[2] + '/media/?size=l';
        type = 'image';

    } else if ((rez = href.match(/maps\.google\.com\/(\?ll=|maps\/?\?q=)(.*)/i))) {
        href = '//maps.google.com/' + rez[1] + '' + rez[2] + '&output=' + (rez[2].indexOf('layer=c') ? 'svembed' : 'embed');
        type = 'iframe';
    }
    console.log(type);
    console.log(href);
    if (type) {
        obj.href = "http://" + href;
        obj.type = type;
    }
}​

---

如果您正在本地计算机上尝试此操作，则外接程序可能正在尝试使用链接访问视频

file://player.vimeo.com/video/5319920?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1

您可以通过提供以@lucuma所回答的完整URL开头的URL或更改$.fancybox.helpers.media.beforeLoad方法来更改此设置。此方法为包括vimeo在内的许多web站点提供支持。此方法会覆盖您提供的href，例如它会转换

如果您正在本地运行

file://player.vimeo.com/video/5319920?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1

尝试更改media.beforeLoad函数，如下所示，在最后一行中添加http://to href，应该可以使用

$.fancybox.helpers.media.beforeLoad = function(opts, obj) {
    var href = obj.href || '',
        type = false,
        rez;

    if ((rez = href.match(/(youtube\.com|youtu\.be)\/(v\/|u\/|embed\/|watch\?v=)?([^#\&\?]*).*/i))) {
        href = '//www.youtube.com/embed/' + rez[3] + '?autoplay=1&autohide=1&fs=1&rel=0&enablejsapi=1';
        type = 'iframe';

    } else if ((rez = href.match(/vimeo.com\/(\d+)\/?(.*)/))) {
        href = '//player.vimeo.com/video/' + rez[1] + '?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1';
        type = 'iframe';

    } else if ((rez = href.match(/metacafe.com\/watch\/(\d+)\/?(.*)/))) {
        href = '//www.metacafe.com/fplayer/' + rez[1] + '/.swf?playerVars=autoPlay=yes';
        type = 'swf';

    } else if ((rez = href.match(/dailymotion.com\/video\/(.*)\/?(.*)/))) {
        href = '//www.dailymotion.com/swf/video/' + rez[1] + '?additionalInfos=0&autoStart=1';
        type = 'swf';

    } else if ((rez = href.match(/twitvid\.com\/([a-zA-Z0-9_\-\?\=]+)/i))) {
        href = '//www.twitvid.com/embed.php?autoplay=0&guid=' + rez[1];
        type = 'iframe';

    } else if ((rez = href.match(/twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i))) {
        href = '//twitpic.com/show/full/' + rez[1];
        type = 'image';

    } else if ((rez = href.match(/(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i))) {
        href = '//' + rez[1] + '/p/' + rez[2] + '/media/?size=l';
        type = 'image';

    } else if ((rez = href.match(/maps\.google\.com\/(\?ll=|maps\/?\?q=)(.*)/i))) {
        href = '//maps.google.com/' + rez[1] + '' + rez[2] + '&output=' + (rez[2].indexOf('layer=c') ? 'svembed' : 'embed');
        type = 'iframe';
    }
    console.log(type);
    console.log(href);
    if (type) {
        obj.href = "http://" + href;
        obj.type = type;
    }
}​

---

你只需要再做两件事：

一,。添加fancybox media helper js文件，如检查您自己的路径：

<script type="text/javascript" src="{your_path}/helpers/jquery.fancybox-media.js"></script>

二,。将帮助器介质选项添加到脚本中：

$(".fancybox").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    padding: 0, //<-- notice I added a comma here ;)
    helpers : {
     media : {}
    }
});

---

你只需要再做两件事：

一,。添加fancybox media helper js文件，如检查您自己的路径：

<script type="text/javascript" src="{your_path}/helpers/jquery.fancybox-media.js"></script>

二,。将帮助器介质选项添加到脚本中：

$(".fancybox").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    padding: 0, //<-- notice I added a comma here ;)
    helpers : {
     media : {}
    }
});

我确认这一点//