Fancybox returning " The requested content cannot be loaded. Please try again later."

Using Fancybox to play youtube videos in a modal box.

My Problem is that I keep getting "The requested content cannot be loaded. Please try again later."

The modal box is popping up so I know the script is running, it might be a problem with my API call... here is my call:

<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>

Do you have any <a>s with both class="fancybox" and rel="fancyvideo"? If you do then you'll be binding Fancybox to those elements twice and Fancybox might not like that. Try taking out this one:

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

And see what happens with just the second one in place.

UPDATE: Strange. The demo (http://chadly.net/demos/video-lightbox.html) is producing different HTML than your page, the demo builds an <object data=...> but yours builds a <object><embed src="youtube-url"> thing. You're saying:

type: 'swf'

in your Fancybox binding, that's where the <object><embed>...</embed></object> stuff comes from. However, the href points at a plain old YouTube video viewing HTML page and that href ends up as the src attribute for the <embed>. The URL for embedding a YouTube video isn't the same as the video's HTML page and that's probably the source of your problem.

Try replacing the href that looks like this:

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

with one like this:

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

The first is the plain HTML page for YouTube, the second is the embeddable SWF.

UPDATE 2: The example you're working from is for Fancybox 1.0.0 but you're using 1.3.4, 1.0.0 has some special checks for YouTube that aren't present in later versions:

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

That's from 1.0.0 and the code after that else if rewrites the HTML page URL (e.g. http://www.youtube.com/watch?v=QmVvgSfdmJQ) to the older embeddable SWF URL (e.g. http://www.youtube.com/v/QmVvgSfdmJQ). This version problem also explains why the demo was producing different HTML than your's.

So, you have some version problems on top of everything else.

Check if you have included the jquery.fancybox-media.js

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

Looks like your code might be slightly off

<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

use this sample don't forget href

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