Displaying a video lightbox in IE7

16 03 2011

Recently on a project at work, I had to implement an FLV player inside a lightbox that would be activated by clicking on an image. It worked perfectly in every browser, except for Internet Explorer 7 and 8. After three workdays and several hours from my coworkers, I finally made it work.

For this project, I used the Colorbox lightbox JQuery plugin. It is fairly mature and easy to implement. I also used SWFObject to replace the contents of a div with a particular idea with the SWF video player loaded with the appropriate content. All of this was built on top of WordPress in a custom-built theme.

In all other browsers, the video showed up and played perfectly. In IE, it simply showed a small gray box in the upper left corner of the lightbox. My implementation of Colorbox works by taking the inner HTML of a hidden div and moving it into Colorbox’s own dynamically generated div and displayed in a lightbox.

Originally, SWFObject would run on page load and then that would be moved into the Colorbox when the proper element was clicked. It turns out IE does not like this. The trick was to have SWFObject run only after the Colorbox was loaded and displayed. The SWFObject code should be included inside an inline function that will be called by Colorbox once the lightbox is displayed. Below is a simplified version of the code I used.

$('#video-lb').colorbox({width:"942px", height:"402px", inline:true, href:"#video-lb", onComplete:function(){
   function setVideo(vidpath) {
      var flashvars = {
         flv: vidpath,
         showvolume: 1,
         showtime: 1,
         showfullscreen: 1,
         showiconplay: 1,
         autoplay: 0,
         bgcolor: "000000"
      };
      var params = { allowFullScreen: true };
      var attributes = {};
//-----------------------------
      swfobject.embedSWF("player.swf", "playerContainerDiv", "618", "350", "9.0.0","expressInstall.swf", flashvars, params, attributes);
   }
//-----------------------------
   setVideo("video.flv");
}});

Video lightboxes seem to be becoming more and more popular. IE support is still typically required for most development shops. Hopefully this will help someone who is trying to do something similar.

Advertisements

Actions

Information

4 responses

27 06 2011
steve88Test

Videos should never be lightboxed in IE. Instead, the user should be shot.

27 06 2011
patrick42h

I know. I really wish I didn’t have to do it, but the designers keeping doing it and the clients love it. I guess I’m stuck. haha

28 09 2011
Vikram Kalmegh

Well, the video works for me fine at the first run, but after I close the lightbox/colorbox and try to reopen the video it video plays for a while without sounds and then just stops forever.. I would really appreciate if you can suggest me something.

28 11 2012
froodish

Thanks for writing this up – saved me some time for sure!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: