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>