I'm using fancybox to have a simple vimeo popup: /

Here's my jQuery:

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

Here's my HTML:

<a class="fancybox" href="">
    <img class="video_preview" src="/assets/home/video_preview.png">
</a>

The issue is that I get a The requested content cannot be loaded error without any logged errors. Clearly the script is getting called.

What might be happening here, any ideas? I'm at a plete loss.

Thanks!

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

Here's my jQuery:

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

Here's my HTML:

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

The issue is that I get a The requested content cannot be loaded error without any logged errors. Clearly the script is getting called.

What might be happening here, any ideas? I'm at a plete loss.

Thanks!

• javascript
• jquery
• fancybox

Share Improve this question Follow edited Jun 10, 2012 at 5:30 Derek 朕會功夫 94.5k4545 gold badges198198 silver badges253253 bronze badges asked Jun 10, 2012 at 5:24 Ringo BlanckeRingo Blancke 2,44466 gold badges3030 silver badges5454 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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 ma here ;)
    helpers : {
     media : {}
    }
});

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

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

or

http://player.vimeo./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/lucuma/9wAdV/180/

<a class="fancybox" href="//player.vimeo./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./fancybox/demo/1_s.jpg" alt=""/></a>

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

    });
});​

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./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 plete URL starting http://player.vimeo. 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./5319920

to (if you are running locally)

file://player.vimeo./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\.|youtu\.be)\/(v\/|u\/|embed\/|watch\?v=)?([^#\&\?]*).*/i))) {
        href = '//www.youtube./embed/' + rez[3] + '?autoplay=1&autohide=1&fs=1&rel=0&enablejsapi=1';
        type = 'iframe';

    } else if ((rez = href.match(/vimeo.\/(\d+)\/?(.*)/))) {
        href = '//player.vimeo./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.\/watch\/(\d+)\/?(.*)/))) {
        href = '//www.metacafe./fplayer/' + rez[1] + '/.swf?playerVars=autoPlay=yes';
        type = 'swf';

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

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

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

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

    } else if ((rez = href.match(/maps\.google\.\/(\?ll=|maps\/?\?q=)(.*)/i))) {
        href = '//maps.google./' + 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;
    }
}​