2

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

Sanjeev
  • 125
  • 2
  • 11
  • the iframe can you put it to the back with css, z property = -999.. – joshua May 08 '13 at 13:13
  • The z-index value does not work on the flash video, it does affect the iframe though. Anyways, I am embedding just the flash video in my iframe now due to lack of time in my disposal, discarded the idea of embedding the whole website. Thanks – Sanjeev May 09 '13 at 07:38
  • The z-index value does work on a flash video, put the embedded flash object into a div aswell – joshua May 09 '13 at 10:39

1 Answers1

0

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.

Zdenek
  • 690
  • 3
  • 14