Flowplayer in fancybox?

Question

I am trying to get the Flowplayer to be shown inside a Fancybox, but can't quite get it working. This is my code so far;

            $("a.video_link").click(function () {

            $.fancybox({
                'autoScale': false,
                'transitionIn': 'none',
                'transitionOut': 'none',
                'title': this.title,
                'width': 680,
                'height': 495,
                'href': '/flowplayer/flowplayer.swf?video=myvideo.flv', /* have also tried a couple of other options for the url settings, but without luck)
                'type': 'swf',
                'swf': {
                    'wmode': 'transparent',
                    'allowfullscreen': 'true'
                }
            });

            return false;
        });

Any suggestions?

Answer 1

Have you tried to create on SWF Object with jQuery thus setting the swf params with that then using the flow players content setting to directly set the html of the model.??

Also try check your debug window too see if there is any errors showing up.

-- E.G

var flashvars = { //Change this with $.extend within click callback if you need to!
    file : 'yvideo.flv'
}
var flowBoxParams = {
     'autoScale': false,
    'transitionIn': 'none',
    'transitionOut': 'none',
    'width': 680,
    'height': 495,
}

var $conatiner = $('<div></div>').attr('id','MediaPlayerHolder').hide();

swfobject.embedSWF("/flowplayer/flowplayer.swf","MediaPlayerHolder","300","120","9.0.0",flashvars,params,attributes);

$("a.video_link").click(function(){
      //Merge basic settings with title
      params = $.extend(flowBoxParams,{title:this.title,html:$container});

      //Send object to FlowPlay
      $.fancybox(params);

     //Show the video play
     $($container).show();
});

THis is just basically setting to variables with your default settings within them (flashvars ,flowBoxParams), the creating an empty div container with the id (MediaPlayerHolder) and setting it to display:none.

Then we create a basic flash element with swfObject wich is your flowplayer swf and assign it to the hidden div container.

we then wait for the user click to be activated and then we alter the default settings to add title value to the flowplayer options.

We then tell flow player to begin what it needs to do.

with thin change the visibility of the container.

This is untested but if heres any errors they should only be minor, unless flow is strict when it comes to loading the swf will itself.