JQuery UI and YouTube dialog

Question

I am trying to use jQuery dialog with YouTube video.

Code for jQuery:

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: {} }); 

Code for YouTube:

 <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 a button on the page. After clicking the button, the dialog opens above. So the problem is when the dialog box opens, the dialog is behind the video. I tried a search on Google, there is a solution for a similar problem when the video is embedded using Object and embed, but nothing is used when the iframe is used. Any guidance from people on what can be done to solve this problem?

Answer 1

Does <param name="wmode" value="transparent"> add to the object to insert help for Flash content?

I haven’t been involved in the development of flash memory for a long time, but it seems that I remember that I once encountered a similar problem, and this fixed it. YouTube is currently embeddable with an iframe by default, but I think you can still use the old embed method with the object tag.

Edit: for iframe url try adding: & wmode = transparent