jQuery UI dialog and YouTube

I am trying to use jQuery dialog with YouTube video.

The code for jQuery is开发者_开发知识库:

var template = $(document.createElement('div')).attr('class', 'sample').attr('id', 'sample').text('Hello World');
    $('body').append(template);
    $(template).dialog({
        autoOpen: false,
        height: 280,
        width: 600,
        modal: true,
        resizable: false,
        open: function (){},
        close: function () {},
        buttons: {}          
    });

The code for YouTube is:

<iframe title="Video" width="640" height="390" src="http://www.youtube.com/embed/gVjqL-9Fh3E" frameborder="0" allowfullscreen></iframe>

The video is already on the page. There is also a button on the page. Upon clicking the button the above dialog opens. So, the problem is when the dialog opens, the dialog is behind the video. Tried googling, there is a solution for similar problem when the video is embedded using Object and embed but nothing when iframe is used. Any directions people as to what can be done to deal with this issue?

Does adding <param name="wmode" value="transparent"> to the object being used to embed the flash content help?

I haven't done any flash development in a long time, but I seem to remember running into a similar problem once, and this fixed it. Currently YouTube embeds via an iframe by default, but I think you can still use the old embed method with the object tag.

Edit: For the iframe url try adding: &wmode=transparent