November 11, 2009

FancyPlayer Revisited – jQuery Fancybox and Flowplayer Complete Integration

Posted in Tutorials by John

I have recently decided to revisit the FancyPlayer code and after receiving feedback on the blog from our visitors, here’s the new more comprehensive integration of FancyBox and FlowPlayer.

Click here to see the demo for the updated version »

People were asking for full Fancybox support, basically the gallery function using the “rel” attribute and the posibility to use mixed video/images galleries, so I have now added that. I have decided to stick to the “don’t touch the original code” of the two plugins rule, so that made it a bit more difficult, yet not impossible. Now you can add several videos and images as a gallery by using the “rel” attribute for the links and Flowplayer customization is possible as well (the look of control buttons, deactivate fullscreen etc).

Here’s the code inside fancyplayer.js which allows you to customize Flowplayer look and behaviour (the settings are pretty much self-explanatory):
controls: { backgroundColor: 'transparent', progressColor: 'transparent', bufferColor: 'transparent', all:false, scrubber:true, volume:true, mute:true, play:true, height:30, autoHide: 'always' },
Just modify it accordingly to your needs.

The new code available for download on the demo page (just check the page for link setup and the fancyplayer.js file).

An important change based also on user feedback is the use of Fancybox’ native function for opening an image by setting the “href” attribute to the image that the link is on. There was a small issue with the previous code since no actual image was loaded in the Fancybox and it would show the “null” text just before loading the video player. I have decided to change the code accordingly so it is now using the “name” attribute to tell the Javascript what to do next depending on if it’s an image or a video file it has to load.

If the “name” attribute of the link is “image”, it just loads the image from the path set in the “href” attribute as Fancybox would normally do (you can see in the demo that the second link is to an image of the Cadbury Gorrilla, while the other two are videos), if it’s a link to a flash video file it will first load the image file from “href” (I am linking to the actual image the link is on in the demo, which is recommended since that image is already loaded in the visitor’s browser), thus getting rid of the “null” issue, and then calls Flowplayer and loads the video.

I have also made a small adjustment to the dimensions of the container based on feedback from conrad (thanks). 20px added both to width and height of the outer FancyBox div so it would adjust accordingly and show the true video size. The distortion was caused by the extra pixels of the white frame I had not taken into consideration.

One last addition based on steve z’s comment. If you want to trigger FancyPlayer when the page is loaded just add this <script> inside your page’s <head> or right inside fancyplayer.js (skip the $(document).ready in this case):
$(document).ready(function() { $("#mylink").focus(); $("#mylink").click(); });

Just make sure to add the id “#mylink” to the image/video link you want to open first.

As usual, I recommend that, if you want more information about customizing the 2 plugins, you should visit their respective pages here for Fancybox: http://fancybox.net/ and here for Flowplayer: http://flowplayer.org/ . Looking forward to your comments as well as links to pages where you have implemented this.

Related Entries

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://bloggeriz.blogspot.com/ security

thanks good FancyBox
http://www.martinagency.com/ Chris

Thanks for this! I’ve combined your code with jCarousel Lite to create a kick-ass portfolio for an awards entry site (unfortunately it’s behind a password so I am unable to share).
http://wmerrick@mac.com will merrick

i cannot seem to position div#fancy_outer to render at the same position in safari/ff? is there another spot that i can alter to position it?

thanks, will
http://www.burconsult.com john

Thank you all for your comments. Great to see that FancyPlayer was useful for your projects.
@Chris : you could set up a small demo on a public page and send us the link. We would love to see how you combined it with jCarousel lite.
@Will: I’m not sure I understand your question. Are you trying to change the default positioning of the fancybox modal window ? Cause I’ve tested FancyPlayer on all major browsers on both Windows and Mac OS X, and no positioning issues were found. Please try to be more descriptive and I’ll see what I can do to help you.
http://www.martinagency.com/ Chris

Here’s a demo page of the portfolio site, thanks again for your work – you probably saved me a ton of time.

http://bit.ly/8PYOas
Jaspero

Can this work with streaming video URL rather than getting the video from a file server?
http://www.burconsult.com john

@jaspero. Since I used Flowplayer (http://flowplayer.org) for this tutorial, you might want to check its streaming abilities, here’s a link to an RMTP plugin for it: http://flowplayer.org/plugins/streaming/rtmp.html . Good luck with your project and let us know how it turns out.

@chris: Thank you for the demo link. It doesn’t seem to work though, I don’t see the carousel, maybe some files aren’t being loaded because of permissions on your server. Let us know if you can fix that. Thanks.
Philip

Hello. Im feeling a bit retardet and cant make it work (im new to this) My problem is that i cant figure out where to put the link to my flv. video ive tried having it on a server and just putting it in the folder writing the path to in in the “name” and “rel” also ive tried to writing the path in the var videopath in the head. thanks again
http://www.burconsult.com john

@philip: Hello. No need to be feeling bad if things don’t work out at first. We all have to learn from our mistakes and get things right in the end. I recommend you download the code from the tutorial page and take a good look at it, even reuse it for your project. Just remember to include all files, JS, CSS, the FlowPlayer SWF files and your FLVs. This last version of FancyPlayer uses the “name” atribute for the actual link to the .flv file. If you need more assistance, just let us know the URL of your project and I’ll take a look at it and see what’s wrong. Thank you for your interest in FancyPlayer.
Jaspero

@John: Thank you I will definitely post back when I have it in production.

@Philip: I haven’t implemented the links through rel or name. My videos are anchor tags with a class name that triggers the overlay. You might want to try including a url with http (full absolute path without the flv video name) in the var videopath.
Philip

Cool! and thanks for the quick reply
Rene

How do I add multiple key licenses?
rene

nevermind, i got it
http://www.creatiff.com.ua Sergeu

John, thank You for Your time and Your knowelage. But you have a sligt error in fancyplayer.js (line 49, extra comma), which IE hates very much.

Also, You’ve forgotten to add a flowplayer.controls.swf into archive, which causes TypeError 1009 error after “fresh” install.

BTW, in my case, FF player window does not resize to video’s size and in IE sound does not stop, when video is closed.

Have You the same problems? (Yes, it can be seen on demo page, too).
http://www.burconsult.com john

Hello Sergeu. Thank you so much for your feedback and sugggestions regarding FancyPlayer. I am reviewing the code and will post the necessary corrections immediately.
I have also taken a look at your website and portfolio and I like it a lot. Please let us know if you will use FancyPlayer for any of your projects.
http://www.burconsult.com john

I have tested this with IE6 (unfortunately there is still a percentage of people using this 10-year old browser) after removing the extra comma on line 49 as Sergeu pointd out. Except from the tutorial page layout looking broken the script works just great. The Flowplayer controls .swf is included in the download archive (flowplayer.controls-3.1.1.swf) so anyone having issues might want to upgrade their Flash player. Thank you for your feedback.
James

I’m loving the fancyplayer! I’ve got a question though:

Is it at all possible to have the movie load into the overlay on clicking the fullscreen button?

I’ve got the flowplayer onbeforefullscreen command in:
onBeforeFullscreen: function() {
alert(‘Going to FullScreen Baby!’);

return false;

},

But everytime I try to call a function to fancy player, the players stop working and don’t laod the videos….
http://www.borninfall.com/en/ Tetyana

Hello, John! Thank you a lot for this tutorial and examples! I had been playing around video in fancybox for a long time before I’ve found this page =)

But I have the same problem as Sergeu. Sound doesn’t stop with IE 7 when I close video I’ve just updated my flashplayer, but it doesn’t help.
http://www.borninfall.com/temp/cv/index.html
http://www.burconsult.com john

@James: Thanks for your interest. I see what you are trying to do, although I think it’s a long call. I’ve worked with calling JS functions from flash over at UserBooth (http://www.userbooth.com) and it works fine in most cases. I see a simpler sollution in your case. Use the Flowplayer configuration parameters to hide the maximize button and use a small image button on one side of or under the player for triggering the FancyPlayer window (and maybe hide the normal player as well in order to avoid issues with flash objects overlapping).

@Tetyana: Thanks for pointing that out. I have ammended the code inside fancyplayer.js under callbackOnClose. The player object to be removed was #fancy_content_api not #fancy_div_api. So the player is unloaded now when the Close button is clicked in IE as well. Make sure to download the updated code. Let us know the URL of the final website you’ll be using this on.
Asif

On demo page http://www.burconsult.com/tutorials/fp2/index.html , IE8 giving following error and so that no video is playing online.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Thu, 28 Jan 2010 07:27:24 UTC

Message: Not implemented

Line: 19
Char: 15990
Code: 0
URI: http://www.burconsult.com/tutorials/fp2/js/jquery-1.3.2.min.js
http://www.asevatu.com Fernando

Hello, I’m trying to use the FancyPlayer but I can’t seem to make it work with relative file paths, I’m building an interactive cd so I need to have everything relative-wise.

Just wondering if you know how to make this work?

Thanks!!

Fernando.
http://www.burconsult.com john

@Asif: I have tested the demo on several browsers and it’s working even in IE6. I have just seen it in IE8 and could’t see any issue. Maybe it’s an issue with your browser, some plugin acting weird. If anyone else is experiencing this, please let us know.

@Fernando: I see you’re trying to use this for a local page. I haven’t tried it yet, but maybe specifying the complete local path may work. I’ll do some testing and let you know. As someone mentioned in a comment JWPlayer seems to have better suport for playing local files, I’ll have to look into it and maybe make a new version using JWPlayer.
Ben Sparrow

Hello,
I’ve got a similar problem to @Tetyana in that the music doesn’t stop when you close the video. I fixed it by putting in a player.pause(); line against the callbackOnClose function.
Cheers
Ben
http://www.clippingimages.com Shamima Sultana

Very resourceful site
http://ikalianpark.com IkalianPark

I’m getting the following error when I try to get a video to play when the page loads:
200, Stream not found, NetStream.Play.StreamNotFound, clip: ‘[Clip] ‘http://www.ikalianpark.com/undefined'‘

It looks like the clip’s location is being lost somewhere along the way.
Playing the video by clicking the link works fine though. Any ideas?
http://ikalianpark.com IkalianPark

I’m getting the following error when I try to get a video to play when the page loads:
200, Stream not found, NetStream.Play.StreamNotFound, clip: ‘[Clip] ‘http://www.ikalianpark.com/undefined'‘

It looks like the clip’s location is being lost somewhere along the way.
Playing the video by clicking the link works fine though. Any ideas?
http://ikalianpark.com IkalianPark

I fixed that error by changing $(“#mylink”).focus(); to $(“#mylink”).hover();
http://www.richgates.com Rich Gates

This is exactly what I’m looking for, for a new project I am doing. Are there any plans on making this a WordPress plugin?

Thanks!
http://www.burconsult.com john

@IkalianPark: Considering the error message you mentioned, it must have been a path error. Glad to see you found a fix and thanks for letting us know.

@RichGates: Thank you for your interest in FancyPlayer. We’re considering releasing this as a WP plugin in the future along with other plugins we’ve been working on. No release date though, but if you need help implementing this on a WP site, let me know and I’ll gladly assist you.
Mike

Hello

maybe you can make the same but using Jwplayer?

Regards
http://www.asevatu.com Fernando

For anyone interested – I’ve solved my problem and created the interactive cd with Video Lightbox – http://videolightbox.com/

Great product!
http://coolkurt.com kurt

That’s awesome thanks a lot!
Risk

Hello,

I currently test a local version of the latest FancyPlayer with online videos, but when my videos appears they are small( 220:150) I don’t understand what is the problem because my videos are 720:480. How to change automatically the proportions of the FlowPlayer ?

And How to show the fullScreen Icon ?

Thanks.
http://www.burconsult.com john

@Risk: When you use thisoffline, that is open the html file on your computer locally, due to security restrictions, the Flash player’s attributes canot be accessed/modified, so FlowPlayer swf doesn’t adjust to the video size. It’s not an issue once you upload it to the server.
As for having the fullScreen icon visible that’s a matter of adding it to the “controls” part in the fancyplayer.js file. Just add “fullscreen:true;” in there like this for example:
…
all:false,
fullscreen:true,
scrubber:true,
…
Hope this solves your problem, Let us know how it worked out.
MattM

I love FlowPlayer
Though, I had problems downloading the code from the demo page. For me, it seems like the link is broken.

The big problem I’m facing though, is that in IE the video and images are not displaying at their true resolution. In Firefox it looks perfect. I saw in some of the other posts that there was a size issue before, I’m not sure if it was addressed for IE.
MattM

My apologies, I rebuilt my app and now it’s working perfectly. FancyPlayer is awesome!! Thank you for making it!
Farrah

I’m wondering if there’s a setting to stop the popup from automatically closing when the .flv video ends. I would like to only have the popup close when the X is clicked.

Thanks for all your hard work!
http://www.burconsult.com john

@Mark: Thank you for your messages. Great to hear you managed to use it in one of your projects. If you want, you can leave us a link here so we can have a look. Thanks.
@Farrah: It’s very easy to stop the modal window from closing on video end. Just remove or comment out the following lines inside the “fancyplayer.js” file:
onFinish:function(){
$(‘#fancy_close’).trigger(‘click’);
}
That is the call that triggers a click on the close button when the video clip ends. Removing it will prevent this from happening.

I would also like to let you know I’ve modified the code for the demo in order to include the FlowPlayer content and captions(subtitles) plugins requested by @Jason Eveland in a comment: Here’s my message to him:

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://its-me.us/ Scott

Yeah, VideoLightbox.com is cool! Thanks for sharing..
http://pamblizzarddotcom PD Blizzard

Hi, I had a problem with the download link too.

Awesome player – I’m just starting to learn flowplayer.
serm

Hey, awesome project. Congratulations.

!!!! I couldn’t find the download link for the 2nd version, though !!!!

Would you please fix that?

Thanks.
http://www.burconsult.com john

@PD Blizzard & serm: Thanks for pointing it out. Now the download link is fixed on the demo page. The zip file contains the FancyPlayer demo files (minus the videos) with all the latest updates, including the captions plugin for FlowPlayer I applied not long ago. If you’re not going to use that plugin and want a smaller JS file, just remove the extra code (and the 2 SWF files for “content” and “captions” in the video folder).
Jonathan

is there anyway to change the skin on the video player? Thanks
Jonathan

I’m also have trouble changing the size of the video?
http://www.burconsult.com john

@Jonathan: For skinning FlowPlayer I suggest you take a look at their website – http://www.flowplayer.org – loads of documentation there on available customization, plugins etc.
As to your troubles changing the size of the video, could you please be more specific, maybe even include an example? Maybe it’s the offline issue where, due to security permissions, the player does not resize to the video’s size when the HTML page is opened offline and not from a server.
http://blog.nextmola.com Henning Mølbæk

Hi,

Can’t seem to get it to work on my own site. Have you tested this with FancyBox 1.3.1?
Greg

Had the same problem, had to downgreat it to FancyBox 1.2.1.
Can not wait for new version of your cool FancyPlayer plugin
http://www.burconsult.com john

@Henning @Greg: Thanks for your interest. I will test FancyPlayer with the latest Fancybox version and fix any eventual issues. Will post back as soon as it is done.
maTT

Hello John,

Any updates since March?

=)
DukeS

Hello,

I also have problems with using flowplayer with fancybox version 1.3.1.
I have mixed images and videos on website and if I can get to show images correctly video doesn’t work and vice versa.
Does somebody have solution to display videos with flowplayer and fancybox 1.3.1?

Thanks
http://www.iranianlivetv.com Nick

I consider using Fanybox with Flowplayer, nut as you know, as you know eCPM is very important for selling ads.
My question is: does every click count as a site impression at fancybox, cause it is ajax ?

Thank you,
Nick
badee

we are hopefully waiting for fancyplayer for fancybox 1.3.1.
please post it as soon as possible.

thanks for this useful work
Ken

I too am having problems using flowplayer with fancybox version 1.3.1.

You’ve done some great work here. Getting it to play nice with 1.3.1 would be awesome.

Thanks in advance for your help!
http://www.faceajan.com Face Ajan

Facebook Şifre Alma Programı
Bilgisayara Girme Programı
Timo

Thanks for this great combination of fancybox and flowplayer.
Unfortunately there are major changes in the new release of fancybox 1.3.1, that it is not so easy (or possible) to adapt the fancyplayer to it.

The new features are very cool and I can hope that there will be a chance to upgrade the fancyplayer. I used the fancybox 1.3.1 for “iframes & ajax” and “images” before and now for videos but have to downgrade to 1.2.1 with less features.

But so far … many thanks!!! Now I have all things together.
http://www.kagestudio.com kj

can someone explain to me how to set up the path to my videos locally. I have them in my folder labeled “videos” so I was thinking the path would be ” videos/” but when i use the player the videos never show.
http://www.kagestudio.com kj

If I want to get the player to play my videos. I’m not online yet so i need to test locally what should i put here: var videopath = “http://www.burconsult.com/tutorials/fp2/”;. When I switch the source to var videopath=”videos/” I get nothing. What am I doing wrong?
JR

Is there any news on the transition from Fancybox 1.2 to 1.3? I was SO looking forward to incorporating this into my work to finally have an “end-all” modal solution… but being stuck in 1.2 just won’t do it for me. I hope to see an update soon. Thanks John for all your work.
http://twycf.com/wordpress/ shinn

i have found one problem with IE, while video download, then click close, the video still download background.
please see this thread on FlowPlayer Forum:http://static.flowplayer.org/forum/1/42434
http://twycf.com/wordpress/ shinn

how to disable download FlowPlayer.swf everytime like this?
flowplayer-3.1.5.swf?0.769528549724676

thanks.
http://balajee.co.cc/ Balajee

its a nice tutorial. i’m looking for similar kind of tutorial on using jw player for swapping text on paricular duration of time. tutorials available for Flash action script.. but i need to implement it using javascript (jquery) . Can someone help!.
http://balajee.co.cc/ Balajee

That should be similar to Slidesync plugin for Jw player.. But i dont wanna use that plugin .. instead i need the javascript to make that job done.
Kevin

Any deadline on when we can suspect an working update for 1.3.1? Cant wait
Thanks for the great plugin…
Peter Schmidler

Dear John, Thanks for sharing this! I’ve been checkin it out for days now and thinking about using it as a base for some projects. There’s one thing I’m confused about though. When I use the same image in the href for different videos your script seems to handle them as if they were one, and shows all kinds of strange behaviors like e.g. showing the same title for all videos. Since I use one Thumbnail for all Videos on the Page I have a problem.
Peter Schmidler

One other thing I noticed: the gallery buttons are not horizontally centered over the videos but over the images they are. Where did you change the styles of the icons when showing a video?
http://www.kidslikecoloringpages.com/category/spongebob/ Coloring Pages

Wow this takes me back. Adding to my bookmarks thanks.
http://www.i-capshop.com wholesale new era hats

Thanks for posting this. Very nice recap of some of the key points in my talk. I hope you and your readers find it useful! Thanks again
http://www.kidslikecoloringpages.com/category/handy-manny/ Coloring Pages

Adding to my bookmarks thanks. Where is your contact details though?
Kew

Hey John, very cool script. Any ideas on when it will work with the newest versions? Im in really need of the script. Keep up the good work
Steve

Dear John,

Thanks for this, it is great. However I do have a small problem : how to change the width and height of the video ? It does choose the size of the video by itself!

As I don’t have any “control” variable in the “fancyplayer.js”, I can’t do what you explain above.

Well I tried to copy/past the code of (fancyplayer.js) of your demo page on mine, but when I do that, it doesn’t work anymore. (I don’t understand javascript but the content of the fancyplayer.js file of your demo page is way different than the one I have downloaded from the site).

Thanks for your help. I’m sure its easy to modify the width and height of the page – you juste need to know how to do it

Steve
http://www.burconsult.com john

Hello Steve,

I understand your frustration. I know JavaScript can be like that sometimes. First please make sure you are working with the right version of the scripts. If you are using the code downloaded from the FancyPlayer 2 – http://www.burconsult.com/tutorials/fp2 – page then it’s a matter of changing 2 lines inside fancyplayer.js as explained before.

If you want the size of the video player (keep in mind the actual fancybox window is a bit larger due to the white padding), then all you have to do is specify it instead of letting it be read from the media to be played: That means changing the values of the variables clipwidth and clipheight in these 2 lines:

var clipwidth = clip.metaData.width;
var clipheight= clip.metaData.height;

to whatever specific size you want the video player to have, for example:

var clipwidth = 600;
var clipheight= 480;

This way the script will always load the videos at this size. Try it with a clean copy of the demo files and let me know if you managed to get it to work. Cheers.
http://www.rhubarbmedia.ca Mark

What version of Fancybox and Flowplayer is this intended to work with? I’m using the latest versions (Flowplayer 3.2.4 and Jquery Fancybox 1.3.1) and I’m not having much luck. I keep getting “The requested content cannot be loaded. Please try again later.”
http://www.hats-trade.com red bull energy hats

I like the website http://www.hats-trade.com ,you can buy anything anytime.
michi-es

Hi there,

First I’d like to thank you for the effort of publishing this tutorial. Nevertheless though after having problems with the flowpayer in a fancybox after following your tutorial (which seems to be a version issue with flow player) I found this tip at GIT Hub which worked like a charm!

http://gist.github.com/571643

Works with flowplayer 3.4.2 and fancybox 1.3.1

I hope you don’t mind if I share this information with you and all the readers of your tutorial

Best regards,
michi-es
Roman

The example with the gorilla doesn’t work (the video doesn’t play).
http://n/a Parker Bennett

Is it possible to use Flowplayer’s iPad plugin with this?
Nikhil

Some videos and audios not working such mp3,dat etc
millzee

everything works except IE, which shows a ‘null’ is null or not an object error everytime i close the fancybox.
http://www.china-blockmachine.com/ Brick machine

Thanks a lot. It really help me.
http://www.offerjewelry.com cheap chanel bracelet

It is very kind of you to share this.
http://www.down-jackets-sale.com/ Moncler Man jackets

thanks for your nice article.
http://edc-info.org Ed Johnstone

Awesome .. thanks I was looking for a replacement for jquery media plugin, and something more that jquery lightbox. Note: I would have written more, but your error-check is complaining of ‘spam’ Thanks
http://www.agico.com.cn oil press

Thanks a lot for you share…
http://edc-info.org Ed

Works perfectly – I am looking forward to you updated version for fancybox 1.3x. Thanks again.
Christopher

I’m rebuilding my web site and not exactly a web dev guru. I’d like to know if there are any instructions on how to install FancyPlayer ?
tugboat

I get 303: failed to load the resource Unable to load resources error: # 2032.

I adjusted the paths and now nothing happens, I am loading flv’s
Amanda

Hi! For some reason, the video won’t play, but the box shows up. Also, I don’t quite understand the var videopath? How would that work? Do I need to put the path of the videos? Or of where the js fancyplayer is? Please help. Thanks!
http://www.tristan-jahier.fr Tristan Jahier

This plugin looks awesome.
But I can’t make it working. I tried everything…
I don’t really understand how to link the video in the html code…
For the moment I just would like to modifiy the demo code before integrating it to my website. I work locally and it just seems not to work… T.T
http://www.tristan-jahier.fr Tristan Jahier

I found a part of the solution : i seems that it work better when uploaded on a server, and not locally.
The var videopath is the root of the page.
The video URL is called in the name tag (name=”videos/bottleopener.mp4″) of the link.
It is a relative URL, from the videopath var.

But uploading videos is quite annoying. It should be helpful to test it offline.
http://www.tristan-jahier.fr Tristan Jahier

I made it working.
But I noticed that we can’t include the last jquery & fancybox versions.

Maybe you edited these files ?

How can we update this plugin ?

Thanks a lot. ^^
Emre

Hi,
Thank you for this work. But it isn’t working with the last Jquery and Fancybox versions as Tristan said. So can you update the codes for last versions please?
Greg McGee

What would be really helpful would be a step by step procedure that shows how to install and where to put the code that points to my video. It obviously works for you, but its so convoluted that I don’t have a clue as to how to make it work for me. PLEEEEEZE?
http://thuraya.com gk sezhian

Hi ,
Im facing the issue as mentioned in the
http://firelitdesign.blogspot.com/2011/06/flowplayer-flash-video-and.html

I have to mention object id it seems.How to do this using the Fancy player.

Thanks for your great effort.

rgds
GK
http://www.y8girlsgames.com Y8

I found a part of the solution : i seems that it work better when uploaded on a server, and not locally.
The var videopath is the root of the page.
http://www.estudiosmedia.com.ar Mauro chius

hello,
i’ need open fancybox from a movie flash (swf).
any idea ?

in the botton swf :

on (release) {

getURL(“javascript:LaunchFancybox(‘videos/video1.flv’)”);

}

AND THE HTML :

function LaunchFancybox(url){
$.fancybox({href:url});
}

but this method does not work
Ansh

Hi,

This updated code is not working with latest jquery version.Any solution for this?
Ansh

WebGurus Design Blog | Web Design, Web Apps, Inspiration and resources.

FancyPlayer Revisited – jQuery Fancybox and Flowplayer Complete Integration

Related Entries

Signup for our awesome Newsletter!

About the author

Sponsors

Recent Comments

Recent Posts

Affiliates