August 3, 2009
86 Comments

FancyPlayer – jQuery Fancybox and Flowplayer Integration Tutorial

Posted in jQuery, Tutorials by John

Please be advised this tutorial has been updated in a new post with better integration of Fancybox and Flowplayer based on visitor feedback.

I have used these two javascript plugins in a recent small project for a client who is selling a bar and wanted a photo and video gallery for potential buyers to see. I didn’t want to go the YouTube/object embed road, so this is what I came up with. Flowplayer is undisputedly a great flash video player versatile enough even for most projects with its free version and Fancybox I had used before in several other projects.
Fancybox is a fine modal box capable of showing pretty much any kind of content. The guys over at Flowplayer.org have released their own jQuery tools library which integrates perfectly with Flowplayer. I wanted the best of two worlds.

The integration proved to be a challenge since the iframe mode in Fancybox would NOT work with a page using Flowplayer. I had used JW Player in an earlier project this year and iframe mode worked great in that case using the SWFObject js to embed the player. But since I liked Flowplayer’s interface and capabilities better, I decide to give it a shot. Did a lot of testing and rewriting since then , so I’ll try to cover it all. This may end up turning into a plugin of its own after adding some extra options and functionality, so keep an eye on WGDB.

As for most jQuery plugins, there is no special HTML markup to do in order to fire up Fancybox, jus give the elements you would like to use this plugin a certain class so you can use that as a selector in Javascript. Here’s the code I used in the demo:
<ul id="videos">
<li>
<a href="videos/tour.flv" class="video_link"><img src="images/tour_video.png" width="218" height="148" alt="tour" style="margin-bottom:4px" /></a>
</li>
<li>
<a href="videos/gorilla.flv" class="video_link"><img src="images/gorilla_video.png" width="218" height="148" alt="gorilla" style="margin-bottom:4px" /></a>
</li>
<li>
<a href="videos/bottleopener.mp4" class="video_link"><img src="images/bottleopener_video.png" width="218" height="148" alt="bottleopener" style="margin-bottom:4px" /></a>
</li>
</ul>

So we have 3 links with the class .video_link. We will use this class later in order to fire up Fancybox. I have used an ul in the demo just for layout reasons. You can use text, images or other elements as links to trigger the effect.

Of course you should remember to include all the necessary CSS and Javascript in the <head> of the page:
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/flowplayer-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/fancyplayer.js"></script>

We include the CSS files first in order to avoid issues with some browsers. We have the stylesheet that comes with fancybox (with slight modifications I will cover below) and a style.css sheet for the demo layout.
You can guess the respective versions of the JS plugins from the filename. We have jQuery, Flowplayer, Fancybox, the Easing plugin (optional) and the Fancyplayer file which works the integration magic.
If you download the demo files and take a look at the directory structure you will notice I chose a folder named videos to hold the video files and the 2 swfs needed by Flowplayer ( the player itself: flowplayer-3.1.1.swf and the player controls: flowplayer.controls-3.1.1.swf). You will have to do the same or change the path variable swfplayer we will cover next. Keep in mind I have NOT included the video files in the code archive for download due to file size and some of the functions will not work locally (the player resize function) due to security limitations.

There are two variables which you will have to declare next in the head of the page:
<script type="text/javascript">
var videopath = "http://www.burconsult.com/tutorials/fancyplayer/";
var swfplayer = videopath + "videos/flowplayer-3.1.1.swf";
</script>

The videopath variable is the path to the root folder holding the videos directory.  This may not please everyone especially if you want to use this with videos scattered over different folders or servers, but with minimal modifications it should work for any given case. The swfplayer variable is the path to the Flowplayer swf needed to play the video files as mentioned just before.

I have made some small modifications to the fancybox css code in order to move all images used by the plugin to the general images folder and to add a background image to the “fancy-div” element which appears very briefly before flowplayer is loaded in its place. Thus, background:url paths have been changed to ../images/bgimage and #fancy_div was given a background: url(‘../images/video_bg.png’) no-repeat . You can skip this or declare it in you own stylesheet if you don’t want to modify the original plugin css. There is a download link to an editable PNG containing the elements used in the example (video link images with Flowplayer logo and the video_bg.png image) on the demo page. You could modify this and add your website logo for example.

Now let’s get our hand dirty with the FancyPlayer Javascript code.

Here is the first part:
$(document).ready(function() {
function preloadImages()
{
for(var i = 0; i<arguments.length; i++)
{
$("<img>").attr("src", arguments[i]);
}
}
preloadImages("images/video_bg.png");

This doesn’t have much to do with the integration itself, it just sets it so the code is executed whe  the DOM is ready and using a small preloading function borrowed from here, it preloads the video_bg.png image so it will show up instantly when the first video is played. As mentioned before, this is optional, and added to the demo simply for aesthetics.

Now we start setting our Fancybox plugin for use on our video links. As a quick note, you can continue using fancybox to display whatever else it supports (image galleries, iframe or ajax content etc.) as documented on the Fancybox.net website, since no modifications are done to the plugin code.
var videoclip='';
var player='';
$(".video_link").hover(function(){
videoclip=$(this).attr('href');
$(this).attr({"href":"#video_box"});
},
function(){
$(this).attr({"href":""+videoclip+""});
});
$(".video_link").fancybox({
'hideOnContentClick':false,
'overlayOpacity' :.6,
'zoomSpeedIn' :400,
'zoomSpeedOut' :400,
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack',

First, we declare the two variables we will use for playing videos in FancyPlayer: videoclip, which takes its value from the “href” attribute of the clicked link, and player, which is covered in the next code section. As an extra “protection” measure, we can have the browser status bar show a “fake” element #video_box as the link’s path on hover in case we don’t want visitors to see the direct link to the flash video file.

Then we fire up the Fancybox plugin on all elements having the .video_link class using normal Fancybox arguments. These you can find documented on the plugin’s website and the names are pretty self-explanatory anyway: the opacity of the overlay in percentage (60% in our case), the time it takes to show or hide the box, and the optional Easing plugin we can use for cool show/hide effects (documented on the plugin’s website – sorry for repeating this so many times).

Now for the true integration code. As mentioned at the beginning of this tutorial, I wanted to take the easy iframe way out and found out it didn’t work in Flowplayer’s case, so the obvious option was to use Fancybox’s wonderful callbackonShow option, which will run whatever function you like when the content is displayed inside the fancybox wrapper.
So here it goes:
'callbackOnShow' :function(){
player = $f("fancy_div",swfplayer,{
play:{opacity:0},
clip:{
autoPlay:true,
autoBuffering:true,
url:videopath+videoclip+'',
onStart:function(clip){
var wrap=jQuery(this.getParent());
var clipwidth = clip.metaData.width;
var clipheight= clip.metaData.height;
var pos = $.fn.fancybox.getViewport();
$("#fancy_outer").css({width:clipwidth,height:clipheight});
$("#fancy_outer").css('left',((clipwidth + 36)> pos[0]?pos[2]:pos[2]+Math.round((pos[0]-clipwidth-36)/2)));
$("#fancy_outer").css('top',((clipheight + 50)> pos[1]?pos[3]:pos[3]+Math.round((pos[1]-clipheight-50)/2)));
},
onFinish:function(){
$('#fancy_close').trigger('click');
}
}
});
player.load();
$('#fancy_close').click(function(){
$("#fancy_div_api").remove();
});
},

This is a larger piece of code so I’ll try and explain it step by step. It has better formatting in the demo code in case you wonder. A lot of this I have added later to the code for better layout and customization.

So, using the callbackonShow option, we trigger a function based on Fancybox to create our player, by replacing the #fancy_div container with our Flowplayer swf (declared in the swfplayer variable). The rest is Flowplayer configuration code down to the player.load() function which loads up the player with the selected options. You notice the url variable is built using previously declared videopath and videoclip variables and since we would like our video to load immediately autoPlay and autoBuffering are set to true.

UPDATE: In order to use this with Flowplayer’s commercial version you just need to add a line with the key you get from them under player configuration just like this:

'callbackOnShow' :function(){
player = $f("fancy_div",swfplayer,{
key: '#$flowplayerkeycode',
play:{opacity:0},
...

One of our visitors ran into this issue while implementing this on a client’s website, so I thought of updating the tutorial with this information.

Since we might have videos of various resolutions playing with the fancyPlayer, I decided to get the width and height of the clip (metaData) about to be played and resize the Fancybox viewport  (+ Flowplayer swf) to the actual video resolution, as well as center the player on the page (left, top position). The code is basically the one used by Fancybox when the user resizes or scrolls the browser window adapted to match the clip played inside Flowplayer.

All this is triggered by Flowplayer using the onStart option and  decided to use the onFinish option to close the FancyBox window by triggering a click on the #fancy_close element (yes, the little x button on the top right side). Since DOM is handled differently on different browsers,for extra security, a remove() function is called on the main #fancy_div_api when Fancybox is closed, in order to avoid the invisible player effect, when thebox is no longer there but Flash player wasn’t unloaded and audio can still be heard. Flowplayer uses the player.unload() function which I’ve played with first, but this does the job as well very nicely.

This is it for the Fancybox and Flowplayer integration. I have tested it with all major browsers and it worked very well. There are some issues which I would like to take care of in a future “release”. The “gallery” option in Fancybox (using the rel attribute) will break the thing. I’ll work out a sollution hopefully and also try to turn this into a plugin of itself, which could be fired up side by side with Fancybox with all its available options.

Here are some links to the  resources used in the demo:

Please don’t hesitate to comment and send us links to your implementations of this tutorial or any ideeas you might have for improving it!

Related Entries

Signup for our awesome Newsletter!

We will try to send you e-mail that will open your eyes in the morning and wake you up in the evening!

About the author

John, is the founder of Burconsult, a web consulting and development studio based in the south of Spain. I define myself as a jack-of-all-web-trades, and have been addicted to the whole web business for ten years now. Thought I would start sharing some of the experience with the rest of the community on this blog. Your comments are appreciated and I will try to answer any doubts you might have. Thank you for reading my tutorials and keep up the good work!

  • http://www.moossen.net/ Michael

    nice tut, thanks.
    but any idea how to get the back and next buttons working with flash when grouping the anchors?

  • http://www.shaneeubanks.com Shane

    Nice work! I had messed with trying to accomplish this recently and eventually gave up due to a project deadline. I’ve bookmarked this and will definitely give it a whirl when I get another video project. Like you, I love Flowplayer and Fancybox and wanted them to work together.

    Oh…and a plugin would rock!

    Thanks again,
    Shane

  • http://www.burconsult.com john

    Thanks for your comments, Michael and Shane. I was on a short break last week so I’ll give FancyPlayer another shot starting tomorrow. The two things you mentioned are top priorities, getting the gallery function to work with videos and rewriting this as a plugin. I hope to publish an update on this by the end of the week.

  • http://www.aydincenter.net Web

    nice work
    thanks
    I will use immediately

  • http://Justdesignstudio.com Jay

    hey there – on the basis of your tutorial, i used the flowplayer on a small site. My client however wanted to remove the FP logo, so i purchased it, and having humungous problems trying to enter the commercial key i have into the flowplayer script, as the fancybox script calls the player too. No idea about js, and completely confused and tremendously behind schedule :( – Have you used with the commercial version of Flowplayer ?
    THe site ref is: reddooruk.com/video.html

  • http://Justdesignstudio.com Jay

    Huge thank you for your tut, and for your help in sorting out my commercial key problem. Absolute Legend.

  • http://www.burconsult.com john

    Thanks for your feedback, Jay. Glad I could be of help. I’ve updated the tutorial with a short section on implementing this with Flowplayer’s commercial version.

  • nige

    Hi John,
    This is really smart, cant wait to get it going! I’ve got it my link is fireing up the player, but written in the corner is null, do you know what this means?!

  • http://www.burconsult.com john

    Hi Nigel,

    Thanks for your interest in my FancyPlayer tutorial. The “null” issue is known to me yet since it’s a harmless “bug” and I didn’t want to modify the code of the two plugins involved (Fancybox and Flowplayer), I didn’t quite fix it. The text “null” shows for a tiny moment just before the callbackOnShow fires the function which replaces that div inside Fancybox with the Flowplayer swf. I’ve taken care of that sort of by using a background image with a white bg for that div.

    I hope that made it clearer. Since I see where was quite a lot of interest in this integration from designers and developers out there, I’ll revisit this tutorial in the next few days and maybe solve this issue as well. If you need further assistance with this, just drop me a line and I’ll gladly help.

  • joeschmo

    I’m curious how would I go about adding images in the fancybox rather than a video. I would like to have the same animation with the popcorn preloader show up but display a large image instead. Any thoughts?

  • angeleyes

    That is awesome. it’s working perfectly on my website. But I don’t understand much about the codes. Is there a way to change for example the background color (white) behind the video? And is there a way to re-size the player so it would be fixed and not change according to the video dimensions? And is there a way to bring the “x” close button?

    Thanks.

  • Jaspero

    Was desperately searching for something like this that works over different browser. Nice codes and easy implementation. Thanks.

  • Jaspero

    Hi! Can I make this work for wmv videos?

  • Jaspero

    and also can this work with mov files.

  • http://www.burconsult.com john

    Hi Jaspero and thanks for your interest. As you may know, Adobe Flash Player (FlowPlayer as well implicitly) only play .flv and .mp4 files , with limitations as to the latter format). if you want to show embedded Windows Media or MOV files inside FancyBox that would be a whole different story, although I’m not saying it’s not doable.

    I’ll look into it when I get the time and let you know. If it’s really urgent or you need help with a project, drop me a line and I’ll see what I can do.

  • dan

    Impressive setup and tutorial. A++

  • conrad

    I noticed that the control bar is distorting the videos vertically. Not noticeable on taller videos, but smaller ones it is very obvious. The controller bar is about 22px high and it distorts the video height. I noticed because there was a circle graphic element on the video that looked squeezed vertically.

    example:
    .flv width: 480 height: 269.

    Using firebug in firefox, if I add 22px on the height:269px to height: 291px the video is back at the right scale.

    The width seems o.k. Please advise.

    Thanks

  • conrad

    sorry it didn’t take the code:
    I noticed that the control bar is distorting the videos vertically. Not noticeable on taller videos, but smaller ones it is very obvious. The controller bar is about 22px high and it distorts the video height. I noticed because there was a circle graphic element on the video that looked squeezed vertically.

    example:
    .flv width: 480 height: 269.

    on –> div id=”fancy_outer” style=”left: 534px; top: 74px; width: 480px; height: 269px; display: block;”

    Using firebug in firefox, if I add 22px on the height:269px to height: 291px the video is at the right scale on the height.

  • http://stevezeidner.com Steve Z

    Thanks so much for this wonderful tutorial. How would I go about automatically “clicking” the video link on page load?

  • http://www.burconsult.com john

    Dear Steve, thank you for your comment. I have just posted an update on the FancyPlayer on the blog, so you might want to check it out since quite a few things are changed (to better I believe :) . Your question is covered inside the post as a last minute addition. Let me know if it works fine for you, maybe send us a link with the page you implemented this on.

  • Andrew

    Hey John, awesome tutorial! I followed your guide and everything is working, but I’ve come across some problems. I’m hoping you can help me out.

    Please see my site: http://www.chanmancan.com/videos

    Now click on “Watch HD”, then try scrolling up and down a bit. As you can see, it gets all messed up. Can you tell me how to fix it?

  • http://www.burconsult.com john

    Hey Andrew. Thanks for your comment. Please make sure you take a look at the updated tutorial I have just published a few days ago.
    In your case, the issue may have to do with the fact that FancyPlayer opens on top of an existing flash player. This can cause messy situations in most browsers. In any case, make sure the normal flash player uses the “wmode” attribute set to “transparent”.
    I would also try using the jQuery hide() function for the normal player when the HD version is shown, then use a callback to show() it again when the FancyPlayer window is closed. This would get rid of the flash on top of flash issue. Let me know how it goes.

  • andrew

    Got it to work now, thanks!

  • Rene

    How do I add multiple key licenses for the flowplayer?

  • rene

    nevermind, i got it!

  • http://www.burconsult.com john

    Hello Rene. Glad to see you figured it out by yourself in the end. Maybe you could share it with us in case anyone runs into the same issue. I believe you can do that by using a variable which is set by each domain separately in case you want to use a shared JS file. Thank you for your interest.

  • http://orchidmagic.com John A

    What a great look! I am Fancybox on a new test version of my site that also offers viewing of YouTube videos. Is it possible to use Fancyplayer to view these YouTube (and other) videos? FYI this is a question from someone that knows almost nothing about most web design subjects. The work you share really does help in this painful learning process. Thank you.

  • http://sugi.we.bs Sugi

    Awesome work….I used it for my application..But I found some problems with browser compatability with internet explorer..If anyonce can help..please reply….

  • http://www.burconsult.com john

    Happy New Year everyone and thank you again for your interest in FancyPlayer. Loads of new projects this year so stay tuned for new posts.
    Please remember to go to the revisited version of the FancyPlayer tutorial (http://www.webgurusdesignblog.com/2009/11/fancyplayer-revisited-jquery-fancybox-and-flowplayer-complete-integration/), since several browser compatibility issues have been taken care of, and new functionality was added.

    @John a : Please take a look at the Flowplayer forums here: http://flowplayer.org/forum/7/17501 , it may answer your question about using it to play YouTube videos.

    @sugi: Please see the FancyPlayer revisited post since browser compatibility issues have been solved in the new version.

    Have a great 2010!

  • mike

    Hello

    How to make that fancy lightbox use jwmedia player instead of flow player?
    Why i ask that, i want to use the script on my pc not on internet, jwmedia allow me to watch the videos on my local pc, while flow player doesnt allow that , and after i read their site, they said that i can watch on local but i have to set up the swf, sorry guys i dont know anything about flash, so i can not set it up.
    so i found jwplayer is the easiest way to me:)
    So someone can help me set that fancy box with jwplayer?

    Thanks

  • Jason Eveland

    How can I add the captioning plug-in? I’m trying to add the timed.xml file to the flowplayer. I have downloaded the plugin for captioning but not sure how to make it work. Any help would be appreciated.

  • http://www.burconsult.com john

    @Jason Eveland: Hi, thank you for your interest in FancyPlayer. I have looked into the captions issue and have updated the fp2 demo here: http://www.burconsult.com/tutorials/fp2/index.html . You have to add 2 plugins to FlowPlayer in order for it to work: content and captions. I have quickly put together some code and managed to make it work (take a look at the index.html and fancyplayer.js source. It’s a quick fix so the code is not very optimised but it works. The first video has captions enabled, just watch it. The image (2nd element) doesn’t call for the FlowPlayer to load so no problem there. The 3rd element (beer commercial video) has no subtitles so I just used a hack to make it load an empty .srt file and hide the CC button.
    I’m afraid I don’t have time to update the tutorial or code for now, so I hope this information helps.
    Good luck with your project and please let us know how it goes and if you need more assistance!

  • http://www.free-flv-player.com flv player 10

    Fantastic post! good blog

  • http://www.free-flv-player.com flv to mp3

    This blog is so informative. Nice work!

  • catherina

    Hi,

    Your blog is awesome, nice, informative and very interesting for our visitors. I hope our services will be helpful for your visitors. Our services include good, quality professional web design services, Search engine optimization services, ecommerce website development, data entry, windows mobile application development, web research, data entry, logo and branding.

  • doo-fuss

    This is a great tutorial thank you however flowplayer requires a fair amount of fussing. On your demo flowplayer opens to a default size then re-sizes to fit each video. How would one go about opening up flowplayer in one size that never changes using your implementation. Say 800px X 500px ?

  • http://www.burconsult.com john

    @doo-fuss – “Don’t fuss” would have been a better name for your comment, right :) ? Well, first of all, I hope you took a look at the FancyPlayer Revisited post, which is more up-to-date than this one. Second, if what you want is for the player to open with a fixed size everytime, all you have to do is modify the fancyplayer.js file accordingly. That means changing the values of the 2 variables for width and height to the desired video dimensions. It will still add the extra 10 pixels to each side for the white Fancybox frame. ust look for these lines inside the fancyplayer.js file and put the desired values in:
    var clipwidth = clip.metaData.width;
    var clipheight= clip.metaData.height;
    For example, if you want the video to always have the 480×320 size change those 2 lines to:
    var clipwidth = 480;
    var clipheight= 320;
    Hope this helps. Ley us know where you’re using this.

  • doo-fuss

    Thanks John. Your right I set the clipwidth, and clipheight vars accordingly.
    var clipwidth = 800;
    var clipheight= 500;
    and it still wouldn’t work !

    This is because I was using the fancybox API-options for fancybox 1.3 “width & height”.

    Fancybox was using it’s default #fancy_outer widths then your script was resizing it after.

    Doi ! “Doo-fuss” would be the best title for this post.

    When I used the correct API-options http://fancybox.net/api/126 for version 1.2
    the viewport was the perfect size.

    frameWidth & frameHeight

    REMEMBER READERS….fancybox version 1.2 NOT 1.3 ….and the options are different.

    Thanx John

    Will post a link when completed :)

  • http://pingo6.webs.com Darrick Ulisch

    Nice jQuery post, javascript got much better after this was introduced.

  • http://www.faceajan.com Face Ajan
  • http://www.hdflvplayer.net/ Flv Player

    Thanks for shared your knowledge with us.

  • http://www.kwiaty24.com Kwiaciarnia Kraków

    Thanx for there amazing jQuery post, im trying to avoid javascripts but now maybe i will try again

  • http://mountaintaxi-chile.com tonyxt1

    I tried to integrate the Flowplayer and fancybox in my website but it only works with images, I have not been able to get the videos to show, for some reason the Flowplayer is not being picked up. My site is a Joomla site, are there any security or other issues that might be blocking the your script functionality?

  • http://www.dsabre.com.br Tiago

    help me please!
    ]
    VERY good ADAPTATION, some time I try something like that!

    I have a problem but I am not able to play the videos!
    and a message appears so!
    303: failed to load the resource Unable to load resources error: # 2032

    How can I solve this?

  • http://www.dsabre.com.br Tiago

    help me please!
    ]
    ADAPTATION VERY good, some time I try something like that!

    I have a problem but I am not able to play the videos!
    and a message appears so!
    303: failed to load the resource Unable to load resources error: # 2032

    How can I solve this?

  • http://www.bloggingtomakemoney.net how to make money blogging

    Hi,good post,thanks for your share! and I get confused if i can use this text in my website in case I place a link back to yours? Waiting for your comment!

  • http://segwaytourenleipzig.de hans seifert

    hallo,
    i will on load a video start.
    how i can this do?

    my script:body onload=’$(“a.video_link”).trigger(“click”);’

    div style=”display: none;”
    a href=”intro.flv” class=”video_link”
    /div
    …]
    the video open by load the site and
    the video closed by end

    cann you help me?

    this script is not ready

  • http://www.burconsult.com john

    Hello Hans,

    There really is no need to write so many comments. I understand your issue and I have taken a look at the website you are implementing this on. First of all, there is a big “Click here to see the updated tutorial” button at the top of the article indicating there is a newer version of this tutorial, so you might want to have a look at that.
    Second, if what you want is to open a video on page load you can just use this javascript code in the “head” part of your page:

    $(document).ready(function() {
    $(”#start_video”).trigger(”click”);
    });

    Just give that link the unique id “start_video” and remember to assign it the “video_link” class as well.
    On a side note, I know web development can be frustrating sometimes, so make sure you get some basic concepts (HTML, CSS, JS) straight before moving further. It will spare you a few headaches for sure. And keeping the code clean and readable is a good idea as well.
    Let me know if you need any further assistance. Tschüss.

  • Steve

    Dear John, dear Doo-fuss,

    I desperatly try to control the size of the window following your instructions and it still doesn’t work. I need guidance here, because its really annoying.

    In the fancyplayer.js, if I simply put :

    var clipwidth = 800;
    var clipheight= 500;

    Ofcourse it doesn’t work. And if I replace every clipwidth with frameWidth in the file and every clipheight in the file with frameHeight as Doo-fuss suggest : IT STILL DOESN’T WORK!!!

    Thanks a lot in advance for your help.

    Steve

    The script woks perfectly in everybrowser but it’s just sooo awefully difficult to change the size of this *#*?* window to open it in the size I want !

    I tried almost everything (also replacing the ligne

    $(“#fancy_outer”).css({width:clipwidth,height:clipheight}); with $(“#fancy_outer”).css({frameWidth:clipwidth,frameHeight:clipheight});

    This doesn’t work either.

  • http://www.myabercrombiestore.com abercrombie coats

    We are one of the leaders in discount abercrombie clothing. Get a cute abercrombie jackets to keep you warm this winter or order a vintage looking abercrombie outlet. Abercrombie & Fitch are the leader in US beach wear, place your order before we sell out. Sign up to our mailing list for regular updates of the latest styles.

  • http://www.monclerjackets-store.com moncler mens jackets

    Our site provide first-class service and reliable quanlity garantee,do not hesitate to s Best new era caps,new era hats,delicate monster energy hats,magical nfl hats,one industries hats,rockstar energy hats,Red Bull Caps,The Hundreds Hats,Supreme Hats,DC Comics Hats are in stock now. hake hands with us and go with the tide as soon as possible!

  • http://www.hats-market.com fox racing hats

    it is interesting and wholesale new era hatsinformative article. This has been very helpful understanding a lot wholesale baseball hats of things. I’m monster energy hatssure a lot of other people will agree with me.

  • Jafar

    Please update your script to a new version Fancybox

  • http://www.webgurus.biz Gergely Marton

    We will update the tutorial soon. Thanks for your feedback!

  • http://www.customcyclepros.com Motorcycle Fairings

    Thank you for another essential article. I wish I had your passion for writing!

  • http://www.uggsshoe.net/ ugg shoe

    Thanks! I really need this! You’ve saved me lots of time.

  • http://meaningfulgalaxy.multiply.com/journal/item/4/Start_Your_Daily_About_Disneyland_of_Fantasyland disneyland hotel

    Your content is truly fairly excellent, on the other hand might possibly be good when you might deliver much more examples once more for people who read your post fails to get bored rapidly. I look forward to your next information, I hope some tips i provide printed in this article makes you greater eager again to write greater content material and many more. Greetings of me and also improve the quality of your information more desirable. say thanks

  • http://www.gcmachines.com/ oil plants

    I shall go back to your blog to learn to read the brand new well written articles you’ve written and I am on no account reference in your text in case I even have the perfect time to write. knowledge

  • http://www.electrosupplies.co.uk AndyWhite

    mate, this rocks

  • http://www.egtagames.com gtagamer-boy

    Is there a new version for this?

  • http://www.egtagames.com gtagamer-boy

    Is there a new version for this?

  • emaad ali

    Hi,
    i implemented your control in my website but at the moment it giving me error because of lavalamp property which i am using in my menu.
    can you help me out to solve this problem.

  • emaad ali

    it conflicts other jquery plugins is there any solutions?

  • http://PulseHealthWebsite AJ

    Hi
    I have installed the FancyPlayer it works great :-) One issue I could not make work
    How do I make the left and right scroller to appear on the current pop movie. Can you guide me where to look to resolve this
    Thanks in advance

  • http://www.robbusby.com Rob Busby

    This is excellent! I was looking for something EXACTLY like this and one of my developer buddies sent me this link. Great job guys. Thanks for this brilliant tutorial.

  • http://gokmenkurtoglu.com Gökmen

    it’s incompatible with jquery 1.4.3 and higher versions..

  • http://www.shamiphotos.com/ Wedding photographer

    Is it work with mp4 videos?
    very nice

  • http://www.y8friv.com Friv

    This is excellent! I was looking for something EXACTLY like this and one of my developer buddies sent me this link.

  • http://www.y8friv.com Y8

    Only recently discovered this blog. Since then, I visit every day. Thanks for sharing.

  • http://www.y8amesfree.com Y8

    Nice, any plugin to integrate it with wordpress. Thank you.

  • http://www.y8playgames.com Y8

    it conflicts other jquery plugins is there any solutions?

  • http://www.nigerianmoviesonline.net/ Nigerian Movies Online

    nice plugin and we are planning integrating it in our movie site

  • http://www.silverdreamweb.com/ Kosher kenn

    Hi I am very interested on this.

    Just wanted to ask. Is there anyway you can help me,

    I wanted to have a comment box below the video.

    So each video must have their own comment box. and If they click on the image, surely the video will open up and I would like it to have a comment box below the video that will also pop-up with comments under it if the video has a comment.

    Maybe you can help.

    Thanks,
    Kenn

  • Veer Verdhan

    Hey!
    I am searching to Integrate the flow player in my personal webpage is it possible or legal?
    if yes then please suggest me some code or link as a reference i want to play video in the Flow player.

    thank you

  • jicece33

    hi !
    excellent tutorial ! thank’s
    I tried to find the way to change the video size … please, if you have the solution, I thank you very much.

  • http://www.kizi2.com/ kizi friv

    Good luck for you dude with your idea. I love to enjoy reading your post. Thanks anyway.

  • http://www.facebook.com/pages/ICoFP-Indias-Best-Finance-College/167216628876 Umangsharma27

    Thanks a lot for sharing this with all of us you really know what you’re
    talking about! Bookmarked. Kindly also visit my site =). We could have a
    link exchange agreement between us!

  • Joseph Saadé

    Hello,
    I was first interested in your idea, but then, it gets a bit messy, especially if you have a gallery with videos and images, etc…, so my solution was simple, instead of video just have an iframe pointing to another page like videos.php?vid=21
    videos.php displays video with ID 21 from the database or it can be the video name sing flowplayer
    it is more elegant and supports newer fancybox versions as it is not tied to obsolete methods.

  • http://www.gazo2.info/ gazo2

    I enjoyed your article. Thanks for sharing

  • gillrena

    Thanks for yout work! The demo works fairly well!

    HOWEVER, if you update the fancybox to newer version like 1.3.4, then there’ll be problem of showing the flash content…

  • Raj

    hii 
    its works fine
    but it does not play .mp4 file 
    it gives download option…

    plz tell me how to play .mp4 file

  • Kathie_alej

    The code doesn’t work if you use the latest jquery. I hope there’s a new version of this. 

  • http://www.kizi2.com/ kizi 2

    Thanks John. Your article is very good.

  • Roger

    please update the version, good work but don’t work with new version of jquery and fancybox.

  • Uma

    Thanks for the demo. Its working fine for .flv video but in mp4 the video is not working.

    May be you can help.

    Thanks in advance.

  • Uma

    In IE 10 Fancybox flowplayer is not working.. I get the error something link this “script438 object doesn’t support property or method ‘removeexpression’”.Is there any solution for this to work?