Integrate InLine Flash FLV Videos with JQuery "Lightbox" Plugin – FancyBox

by Luke Whitson on July 12, 2009

I recently spend some time integrating an existing Flash FLV video, from a third party, into an existing application using the JQuery “Mac-Style Lighbox” plugin, FancyBox. Within FancyBox, the existing FLV/JavaScript code provided to us worked properly on all browsers that I tested, with the usual exception, IE6. Upon further investigation, I found that it not only did not work on IE6, but IE7 and IE8 as well. While IE6 is to be expected, 7 and 8 were not.

The easy solution would have been to require the third party to re-export the video into a more usable format for our purposes. But I wanted to see what it would take to get the current code to work within our implementation.

I looked over some old code where I had integrated FLV video and found a simple difference. The provided code used JavaScript to embed the Flash object, similar to the following:
<script type="text/javascript"> swfobject.embedSWF( 'player.swf', {file:'/video.flv',width:'407',height:'320'} );
</script>

While this code worked fine when embedding the video directly into a page, it did not work in our FancyBox window when viewing with IE.

I am sure there are other solutions, but the quick solution I found was to simply embed the code in the standard Object/Embed method used to embed other video formats, rather than using JavaScript to embed the video file:
<object ...> <embed src="player.swf"width="407" height="320" wmode="transparent" flashvars="file=video.flv&autostart=true"/> </embed> </object>

FancyBox is a very nice “lightbox” plugin for those using the JQuery library. If your FLV video is not working in IE with your lightbox implementation, try changing the way it is embedded into the page, it may just be as simple as that.

UPDATE:

Here is a little more elaboration on the code I used to get the flash working.

First, make sure you have the “custom.js” file created that makes the function calls for each lightbox that you want to use. In that file you will want a line that looks something like:

$("a.myvideo").fancybox({ params here ]);

Then in the page you want to call the video from, you will have a link that launches the video. Something like
<a class="myvideo" href="#divcontainingvideo">Link</a>.
Below that you will place the hidden <div> layer containing the actual embed source for the flash video.

<div style="display:none" id="divcontainingvideo"> <embed src="path/to/sourcefile.swf" width="400" height="300" wmode="transparent" flashvars="file=path/to/sourcfile.flv&autostart=true" /> </div>

http://www.business.curtin.edu.au Steve Bramley

Hi there,

I’ve been looking for a lightweight solution for lightbox flash movies. I’ve been looking into fancybox but their downloadable example doesn’t seem to do anything for flash movies. Can you elaborate on the code you’ve used to implement the embedding of flash into the fancybox element please?
lukewhitson

Hey Steve,

I agree, the downloadable examples weren’t very thorough. I updated my post to include a little more about my actual implementation. Hope that helps.

Cheers,
Luke
http://url michael

I had a similar problem with flv videos not playing but changed the way the flash was embedded and it works now.

Do you know how to put the html to embed the flash video in a separate file? (ie the lines that start <div style=”display:none” …) I am going to be placing this exact same markup in a lot of files and it would be nice to only have to include the anchor link in each page (as well as the includes for the js)

Thanks
lukewhitson

Michael,
Never tried that before, but seems like you could copy the entire hidden div layer in to a seperate file. Then just use an php include to pull that file in on multiple pages. Let us know if it works out for you.

Cheers,
Luke
http://www.business.curtin.edu.au Study Curtin Business School

Hi Justin,

Thanks for following up. I forgot to get notified so I struggled on and implemented my own solution: http://www.business.curtin.edu.au/business/future-students/postgraduate-study/flexible-study
http://url Michael

I was able to use the ajax example on the fancy box site to pull in the content from a single file and just add the anchor link and script includes to each file.

Later,

Michael
http://url Funzo

alot easyer than it looks guys, i used the following that seems to work although i cant cross browser test it at this time, my VM is blowing up:

//put in head, empty parameters means default is used.
$(document).ready(function() {

$(“a.myvideo”).fancybox();
});

//link to display
our video

//java script with hidden div

The player will show in this paragraph

var so = new SWFObject(‘http://visiteurope.lastexitlondon.com/mediaplayer/player.swf', ‘mpl’, ’425′, ’355′, ’9′);
so.addParam(‘allowscriptaccess’, ‘always’);
so.addParam(‘allowfullscreen’, ‘true’);
so.addParam(‘flashvars’, ‘&file=http://visiteurope.lastexitlondon.com/mediaplayer/video.flv&controlbar=bottom&autostart=true’);
so.write(‘player’);

thank you very much for the help, im sure i will be back when IE 6 renders it \m/BRING DOWN IE6 \m/
http://url Chris

I am wondering what the process is for just embedding a SWF file to play using this same technique. I can get the SWF to launch in fancybox, but it’s not centered, and there is a “default” sized fancybox window that floats in the background, even though I set the size of the div to the size of the SWF footprint. The SWF file gets pinned to the upper left hand corner of the fancybox window, no matter what size the SWF file is.

Any suggestions would be most helpful!
http://www.zermatt.cz Andrew

Hello,
I am experiencing the same problem as Chris says.. any solution?
lukewhitson

Chris and Andrew,
Sounds like a CSS issue with the divs. Do you have a URL that shows the issue? Might be able to take a look.
http://www.zermatt.cz Andreq

I am sorry I have changed the code so I cannot provide you with an example issue page.

I am not exactly sure where was the problem but I think it was in the wmode=”opaque” …

I have also made a call of the function with these parameters to manage the size of the box as there was no other way the fancybox would be the size of the flash (even with the flash set at certain size):
$(“a.flash”).fancybox({
‘frameWidth’: 1020,
‘frameHeight’: 400,
‘hideOnContentClick’:false});
});
http://url melia

Hola,
I embedded the swf in fancybox as you suggested- everything works ok, but I
cant get the controls(play,pause etc) to show, could you tell me
how I could get the controls up?
Thanks!!!

—-
http://url melia

code(if it loads this time…):

</div

—-
http://www.fatihturan.com fatihturan

What do you think about old “Click to activiate…” problem?
http://www.spiritconsulting.com.ar/fedex Fedex

Man you are awesome! I was looking for a solution to this issue, I was using “object” tag but the embed one did the trick.

Thanks!
http://url humptygrumpty

There’s a much easier way to do this :

$(function(){
$(“a.inline-video”).fancybox({ ‘callbackOnShow’:showMovie});
function showMovie() {
var flashvars = {};
var params = {};
var attributes = {};
swfobject.embedSWF(“movie.swf”, “fancy_div”, “500″, “500″, “9.0.0″,”expressInstall.swf”, flashvars, params, attributes);
};
});

Using the callback from fancybox, you target the fancybox div to write in the movie.
http://www.isletmeciyiz.biz adil

Hi Guys,

Can anyone help me about playing swf files in fancybox.

I have This code:

$(document).ready(function() {

$(“a.inline”).fancybox({
‘frameWidth’: 800,
‘frameHeight’:600

});

});

fancy box opens but i just see the link of swf file. It doesnt start.

If you wanna see : http://www.isletmeciyiz.biz/portal/flashgaleri.asp

Thank you.
http://url rachel

I actually have been trying to do exactly this, and when i put the EMBED in a div with display:none, IE will not display the video in fancybox when i click the link. it works in Firefox but not IE. have you found a workaround for IE??
http://url Jason

Does anyone have an example of this working that they can share?

Thank you in advance.
http://www.lingerieexpert.co.uk/babydoll lingerie babydoll

Hello

Embedding of flash really drives me mad. Fancybox documentation doesn’t explain this clearly, and when embedding swf as they do on demo page, rather than playing it displays some rubbish code…
Prakash

where to download the setup?
Jussi

With display:none on the div tag the video will not show in the fancybox window. When I remove the display:none from the div it works. But then I see the embedded video that is meant to be hidden as well. Am I missing something?

royby

I would like to see the answer to this query as I am experiencing exactly the same issue