Showing div over flash content embedded in a website in iframe

Question

I am going through the questions around various forums for the answer for this one but none seems to be working for me.

I have embedded a 3rd party website in an iframe. The website has some flash content. The Iframe has a container div which has few dropdown menus which are divs themselves. These menus are showing up behind the flash video in the website which is not what I want obviously, I want menus(divs) to be always on top of any flash content. I had the same problem with youtube videos, and adding wmode=opaque to the embed url solved the issue for me there. This problem is different since it involves a 3rd party website containing videos

Following are the things I came up with while looking around. Reason: Since Flash video are rendered by browser plugin and are not html elements, the z-index value in css won't affect them; They will always come on top.

Couple of answers/workarounds
1 Add attribute wmode= transparent to the flash video; Since I do not control the 3rd party website content I cannot do this.
2 Place a transparent iframe behind the div; I have not tried this one so far because I do not completely understand what does this mean, should I have an iframe around the div ?

I want to make sure if above go aheads are all I have or is there anything I am missing as a solution or workaround. I am facing this issue in IE(9 and 10) only. Everything looks fine in Firefox. I appreciate your time on this.

Thanks

Answer 1

You could actually "control" the foreign website. Load the HTML with xmlHttpRequest, make your changes, add body base href so that pics load properly off that site, write to your iframe's srcdoc attribute with

  document.getElementById('myiframe').setAttribute('srcdoc',myhtml)

and Bob's your uncle. Unless a lot of horrible things happen, such as:

• srcdoc not supported in old IEs => implement the data getting and mangling in a server-side script,

• remote site won't send auxiliary files to the wrong referer => you're SOL.