Question

Ok I have installed FB 2.0.x and it’s really nice. But, I have a page with 4 videos on it using the JW Player. Currently, when you click on a link it runs a function to open a fancybox instance. The fancybox is a set of HTML code. Inside the html code is a div with an id (unique for each div/video). Then, it adds the flashvars, params and attributes. The function is below:

function show_modelpopup(id,title,filepath,base_url) {
    var flashvars = { file: base_url+"uploads/videos/original/"+filepath, autostart:'true', skin: base_url+'js/skin.zip'};
var params = { allowfullscreen:'true', allowscriptaccess:'always', wmode: 'transparent'  };
var attributes = { id: id+'player', name: id+'player' };                             
swfobject.embedSWF(base_url+'mediaplayer/player.swf','container'+id, 480, 385, '9.0.115', 'false', flashvars, params, attributes, flashloaded);
}

And when the flashvars, params and attributes are done being setup, it runs swfobject.embedSWF and the last option is the function to run when it’s done loading the video:

function flashloaded() {
    jQuery('#shadowbox_archives').fancybox({
        padding: 10,
        type: 'html',  
        height: 520,
        width: 600
    });
    jQuery.fancybox.open(jQuery('#shadowbox_archives'));
}

And this all works GREAT. It loads the window and you see the flash player. But when you click the play button it gives “The requested content cannot be loaded. Please try again later.”. I’m using firebug on Firefox to console log things and I verified the flv file path IS correct. In fact, I have the homepage set to display the very same video but not inside the fancybox. The output from the swfobject js are below:

Fancybox Popup:

    <object id="45player" width="480" height="385" type="application/x-shockwave-flash" name="45player" data="http://www.green-scene.com/mediaplayer/player.swf">
    <param name="allowfullscreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="wmode" value="transparent">
    <param name="flashvars" value="file=http://www.green-scene.com/uploads/videos/original/video_45_1318559535.flv&autostart=true&skin=http://www.green-scene.com/js/skin.zip">
    </object>

Home Page (non fancybox):

    <object id="45player" width="480" height="385" type="application/x-shockwave-flash" name="45player" data="http://www.green-scene.com/mediaplayer/player.swf">
    <param name="allowfullscreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="wmode" value="transparent">
    <param name="flashvars" value="file=http://www.green-scene.com/uploads/videos/original/video_45_1318559535.flv&autostart=true&skin=http://www.green-scene.com/js/skin.zip">
    </object>

The home page has no issues. But the fancybox does. So what am I missing?

I appreciate all your help!

UPDATE Interesting discovery just made. If I click the button in the player control bar to expand to full screen, it will go full screen and I can click play to actually play it. If I click the button to return to normal size (or hit esc) it continues to play in the fancybox. But then if I try to click pause it disappears and gives me the same error message.

UPDATE #2 Turns out the Internet Explorer likes the above and it works just fine. But Firefox and Safari give me the same error above. It’s mind boggling.

UPDATE #3 I was able to get the video to autoplay when the shadowbox opens, but now you can’t pause or go fullscreen in Firefox or Safari on Mac. But IE 8/9 still work just fine.

Answer 1

OK, I had a look at your page and I saw that each thumb fires a function onclick:

onclick="return show_modelpoup('//parameters')"

the function show_modelpoup(), which is located inside the archives.js file builds the content of a DIV with id="shadowbox_archives" via jQuery html()

jQuery('#shadowbox_archives').html();

but also binds Fancybox to the same selector

jQuery('#shadowbox_archives').fancybox();

… later, the same function fires Fancybox (no shadowbox) with the API method $.fancybox.open() … so far so good !?!?

What is happening here is that the actual content inside of Fancybox is a DIV with id="shadowbox_archives" (also bound to Fancybox), so every time you click on any part inside of such DIV, either your swf controls or elsewhere (even on an empty space) it tries to fire Fancybox again (with no indication of what the content should be this time) hence the error “The requested content cannot be loaded. Please try again later.”

Binding Fancybox to the same content (selector) that will be opened in Fancybox creates a loop effect, so you would need to re-formulate your show_modelpoup() function to change that,

… or maybe you just need to modify the flashloaded() function (inside show_modelpoup()) in a way that it does directly fire Fancybox after the flash content has been loaded, like:

function flashloaded() {
    jQuery.fancybox({
        href: '#shadowbox_archives',
        padding: 10,
        type: 'html',  
        height: 520,
        width: 600
    });
    // jQuery.fancybox.open(jQuery('#shadowbox_archives'));
}

Notice that I commented out the API method $.fancybox.open()

UPDATE:

Since you are using inline content, your flashloaded() function should look like:

function flashloaded() {
    jQuery.fancybox({
        href: '#shadowbox_archives',
        autoSize: false,
        padding: 10,
        type: 'inline',  // no html
        height: 520,
        width: 600
    });
    // jQuery.fancybox.open(jQuery('#shadowbox_archives'));
}