How to display jQuery Dialog on top of YouTube Video/SlideShare PPT?

Question

We use jQuery modal dialog box to get confirmation from users before they delete an item. The modal dialog works fine as long as there are no YouTube videos on the screen.

If there is a YouTube video the dialog box is displayed beneath the video. I tried changing the z-index of dialog to 3999, but no use. (I don't know much about CSS)

               $('#dialog').dialog({
                     autoOpen: false,
                     modal: true,
                     width: 300,
                     zindex:3999,
                     buttons: {
                                'Ok': performDelete_dialog, 
                                'Cancel': function(){$(this).dialog('close');}
                              }
                  });

Can some one suggestme what should we do to place jquery dialog box on top of YouTube videos?

Answer 1

Replace zindex with zIndex; jQuery takes these properties in camelCase. Also, make sure the value you are specifying for the z-index is more than that of the Flash movie on the page.

To find out the z-index of the Flash movie on the page, you could use FireBug (A FireFox addon), which will also prove very helpful if you are learning CSS or doing a lot of web development.

Answer 2

see this u may get solution

Answer 3

did you ever get a successful resolution to this? i am currently battling the same problem ...

Answer 4

It's a problem with Flash - see http://www.ubercart.org/forum/support/2261/youtube_overlapping_thickbox

This looks like a flash issue. Try changing your "wmode" parameter on the YouTube clip to "transparent" or "opaque."

Answer 5

I am so glad to land here.. worked like charm .. good work guys ..

Answer 6

This works fine on the normal embed method, but YouTube are starting to offer iFrame and HTML5 support, which means this solution will no longer work. Can we not persuade YouTube to add wmode="transparent" by default?