Question

134

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

rated 0 times [ 140] [ 6] / answers: 1 / hits: 36208 / 14 Years ago, wed, february 9, 2011, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

devinjadong

Add To Favorites

Follow

Total Points: 711

Total Questions: 117

Total Answers: 100

Location: Andorra

Member since Sat, May 27, 2023

1 Year ago

devinjadong questions

1 How to make an existing React app installable (PWA)?

Thu, Feb 17, 22, 00:00, 2 Years ago

1 clarity.js by Microsoft slowing overall page loads

Wed, Dec 8, 21, 00:00, 2 Years ago

1 How to use document.querySelector and require with node.js and SQLite3

Sun, Aug 29, 21, 00:00, 3 Years ago

1 Object(...) is not a function for Vuex Store

Tue, Oct 27, 20, 00:00, 4 Years ago

1 How to use heatmap written in javascript in react js

Fri, Oct 18, 19, 00:00, 5 Years ago

View All

answered 14 Years ago lailab · Accepted Answer

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.