Colorbox shows under flash

Question

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 colorbox. This happens in Firefox, IE, and Chrome.

Answer 1

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.

Answer 2

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