Question

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>

Answer 1

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.