I am new to DNN 6 and the media module.

It is working fine for me with images, but when I try a Youtube video using the Youtube link it works very well, but I cannot change the options because the configuration popup comes up BEHIND the video, and therefore the controls such as Delete,  etc are inaccessible.

I can open the settings fine in Layout mode but  need to do it in Edit mode to change the media settings.

Can you suggest a workaround?  Do you think the problem is in the module or in the skin?

thanks!

Hey Will,

FWIW - spent a bit of time going round and round on this when 6.0 was released - the solution is not to add CSS code - as no amount ofCSS code  will have any effect due to the nature of how flash works.

The default flash player does not recognize the concept of z-index - and as such it always renders itself on the very top layer of the page.
To force the flash player to recognize and respect z-index layouts - you need tin add a wmode parameter to the <embed code for the flash swf.

When youtube serves up video using its iframe embed code - it is effectively rendering the flash <embed code on the fly - and it does not include the wmode setting in the flash player <embed definition code.

Without this wmode setting - no amount of stuffing around with css will force the youtube video to appear anywhere but on the top layer of the page.  The reason for this again -  is that by default flash video does not recognize z-index.

The correct fix in most cases is simply to add ?wmode=opaque to the end of the youtube url like this:

http://www.youtube.com/embed/nBnOhQuz95c 

becomes:

http://www.youtube.com/embed/nBnOhQuz95c?wmode=opaque  

--   the youtube code renderer will then automatically include wmode as part of the <embed/<object code it generates dynamically.

So for example - say you get the following embed code from youtube:

<iframe width="560" height="315" src="http://www.youtube.com/embed/hHkKJfcBXcw" frameborder="0" allowfullscreen></iframe>

what you need to do is update the code to look like this :

<iframe width="560" height="315" src="http://www.youtube.com/embed/hHkKJfcBXcw?wmode=opaque" frameborder="0" allowfullscreen></iframe>

After this the youtube video with function correctly inside the dnn framework or any other css driven markup - since it will then be rendered on the same z-index layer as the module that contains it.

Weta

No you should not try doing this by creating your own iframe code - that gets messy and kinda pointless in the end.

Instead. If you go to the video on youtube and select the embed options it will give you a small HTML code block 
that is basically an <iframe with a youtube link in it.

You can cut and paste this code into a HTML module - BUT you will still need to make the change to the url part to include wmode=opaque.

In the latest versions of the dnn media module you can also just cut and paste this code block into the Embed control section.

But either way you still need to make the wmode-opaque change.

Westa