jQuery UI dialog with embedded youtube resource - youtube video floats over the top of the dialog

I have a page that has an embedded youtube resouce.  This page also has a number of popup dialogs that I'm creating with jQuery UI.  The dialogs are draggable so you can move them around the page.  But when you move them over the youtube video, the dialog actually floats under the youtube video.  This is not the functionality I'm looking for.

I've done some searching around and found a few examples that explain to do this...
http://stackoverflow.com/questions/4902045/jquery-ui-dialog-and-youtube

I've tried to do this, but it doesn't seem to be working.  Here is my embedded youtube resource.

 

<div class="public-page-video-container">
            <object width="420" height="315">
                <param name="wmode" value="transparent"></param>
                <param name="movie" value="http://www.youtube-nocookie.com/v/fgg2tpUVbXQ?version=3&amp;hl=en_US&amp;rel=0"></param>
                <param name="allowFullScreen" value="true"></param>
                <param name="allowscriptaccess" value="always"></param>
                <embed src="http://www.youtube-nocookie.com/v/fgg2tpUVbXQ?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
            </object>
        </div>

Select allOpen in new window

I've also tried to add a z-index of 1000 to the dialogs and z-index of 0 to the div that contains the youtube.  I'm not sure why this isn't working or what else I should try.

Thanks