Getting a “The requested content cannot be loaded” with fancy box (no errors in console though)

Question

I\'m using fancybox to have a simple vimeo popup: http://fancyapps.com/fancybox/

Here\'s my jQuery:

$(\".fancybox\").fancybox({
    openEffect: \'none\',         


        

Answer 1

if you are trying this locally on your machine, then its possible the add-in is trying to access the video using the link

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

You can change this either by giving the complete URL starting http://player.vimeo.com as answered by @lucuma or changing the $.fancybox.helpers.media.beforeLoad method. This method provides support for lot of web sites including the vimeo. This method overwrites the href you provided for example it converts

http://vimeo.com/5319920

to (if you are running locally)

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

Try changing the media.beforeLoad function as below, append the http:// to href in last line, it should work..

$.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;
    }
}​

Answer 2

You just need two more things:

1). add the fancybox-media helper js file like (check your own path):

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

2). add the helpers media option to your script:

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

Answer 3

There could be a few issues however I know the following should work: Change the href to:

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

or

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

and add the data-fancybox-type="iframe"

Demo: http://jsfiddle.net/lucuma/9wAdV/180/

<a class="fancybox" href="//player.vimeo.com/video/36031564?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" data-fancybox-type="iframe"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

$(document).ready(function() {
    $('.fancybox').fancybox({

    });
});​