Colorbox shows under flash

I am using jQuery's colorbox to open up an iframe on a page. On the page there are two flash SWFs. When I click the button that opens the colorbox, those flash SWFs appear over the top of my colorbox div. I've checked the CSS properties of the colorbox, and the overlay has position:absolute and z-index:999. I have given the SWFs a z-index:0 property, but they still show over the top of the color开发者_如何学运维box. This happens in Firefox, IE, and Chrome.

For those using the iframe embed code from Youtube or Vimeo, you have to approach it differently. I used the events onOpen and onClosed to hide and show back the iframe. Here's an example:

$('.selector').colorbox({
    inline: true,
    href: '.step.'+target,
    rel: 'steps',
    onOpen: function(){
        $('iframe').css('visibility','hidden');
    },
    onClosed: function(){
    $('iframe').css('visibility','visible');
    },
    loop: false,
    opacity: 0.5
});

I guess it also works if you want to apply it to your embed or object tag as a quick solution.

http://jacklmoore.com/colorbox/faq/#faq-flash

If your problem happens to be Youtube Specific, here is the easiest way I found to fix it:

<iframe src="http://www.youtube.com/embed/b-LJ7pYNI0I?
wmode=transparent" width="590" height="332" frameborder="0" ></iframe> 

That is to say, append that final get parameter '?wmode=transparent' to the iframe src.

source: http://groups.google.com/group/slimbox-support/msg/39d42c9e0b6a7093

Make sure your flash is using a window mode that supports z-indexing, such as transparent. This is defined when you start the flash using swfobject, or similar.

Almost certain that this will be the problem, but it could be that you've got the stacking order of the divs a bit confused. Remember that z-indexing isn't a global hierarchy, it takes the index from the parent element.

An alternate version of Jorge's answer:

onOpen: function(){
  $('embed:visible').css('visibility','hidden').addClass('colorbox-hidden-fix');
},
onClosed: function(){
  $('embed.colorbox-hidden-fix').css('visibility','visible');
}

This deals with embed elements, if you happen to have such on your pages. It also tries not to show elements that were initially hidden. Should also work with other types, just substitute embed with eg. iframe.

If you are using iframe to external site that have flash content, you can use next code.

onClosed:function(){
        $('#iframe').attr('src', 'http://iframeurl.com/');
        $('#iframe').show();
},
onOpen:function(){
        $('#iframe').hide();
        $('#iframe').removeAttr('src');
}

enjoy.