1

I experience the very known flash / html overlay issue in Google Chrome (16.0.912.75 m) and Safari (5.1.1). As suggested here and here I have set the wmode attribute to transparent - and tried opaque, as well. Unfortunately both didn't do the trick.

I have also added type="application/x-shockwave-flash" like it is suggested here

Here is the code currently responsible for the embedding.

<iframe wmode="transparent" type="application/x-shockwave-flash" 
    width="760" height="427" 
    src="http://www.youtube.com/embed/Xedbog6_3L0?rel=0&hd=1?wmode=transparent" 
    frameborder="0" allowfullscreen=""/>
Community
  • 1
  • 1
SunnyRed
  • 3,214
  • 3
  • 32
  • 54

1 Answers1

2

First of all, this problem is not reproductive in Safari 5.1.2 and Firefox 9.0.1 (Mac versions). Without knowing your browser, I can only say that since you are using an iframe tag to point a page where Flash is actually embedded, wmode has no effect in your current DOM document, as it is not a valid property of iframe tag (it belongs to embed tag). You'd need to set css property display to block value on the iframe tag in order to to make a browser treat your iframe as a standard layout object. Then, you could set the layer distribution and positioning via CSS.

Aleksandr Makov
  • 2,564
  • 2
  • 29
  • 59
  • Many thanks. I wasn't aware of the wmode attribute being not effective for iframe. Yikes. ... I've added the display: block setting to the iframe and explicitly set the z-index to 0 (the navigation has z-index: 99). Any further advice is very appreciated. (I've added the browser versions above). – SunnyRed Jan 23 '12 at 12:24
  • 1
    Update: Due to your help I found this (http://stackoverflow.com/questions/3820325/overlay-opaque-div-over-youtube-iframe) and solved the issue. Thanks. – SunnyRed Jan 24 '12 at 09:19