Color image displayed under flash

Question

I am using jQuery colorbox to open an iframe on a page. There are two Flash SWFs on the page. When I click the button that opens the colorbox, these flash SWFs appear on top of my colorbox div. I checked the CSS properties of the colorbox, and the overlay has position:absolute and z-index:999 . I gave SWFs the z-index:0 property, but they still show the top of the colorbox. This happens in Firefox, IE, and Chrome.

Answer 1

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

Answer 2

For those using iframe code to embed Youtube or Vimeo , you need to approach in a different way. I used the onOpen and onClosed events to hide and show the iframe. Here is 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 assume this also works if you want to apply it to the embed or object tag as a quick fix.

Answer 3

If your problem is related to Youtube Specific, here is the easiest way to find it:

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

That is, add this final get 'parameter? wmode = transparent 'in iframe src.

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

Answer 4

Make sure your flash uses window mode that supports z-indexing, such as transparent. This is determined when the flash memory is started using swfobject or similar.

I’m pretty sure that this will be a problem, but it may happen that your ordering of divs is a bit confusing. Remember that z-indexing is not a global hierarchy; it takes an index from the parent element.

Answer 5

Alternative version of Jorge answer :

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

This applies to embed elements if you have them on your pages. He also tries not to show items that were originally hidden. You should also work with other types, just replace embed e.g. iframe .

Answer 6

If you are using an iframe for an external site with flash content, you can use the following code.

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

to use.