Docs

Drop Down Navigation Falls Behind YouTube Video

[edit] Please Note

These docs are now deprecated, we have a new Support area located here

(Difference between revisions)
(→YouTube's older embed code)
(→YouTube's older embed code)
Line 35: Line 35:
 
<br /><br />
 
<br /><br />
 
'''After:'''<br />
 
'''After:'''<br />
−
<object width="516" height="380"><SPAN style="BACKGROUND-COLOR: #ffff00"><param name="wmode" value="opaque"></param></span>
+
<object width="516" height="380"><SPAN style="BACKGROUND-COLOR: #ffff00"><param name="wmode" value="opaque"></param></span><param name="movie" value="<nowiki>http://www.youtube.com/v/T6MhAwQ64c0&amp;hl=en_US&amp;fs=1?hd=1&amp;showinfo=0</nowiki>"></param><param name="allowFullScreen" value="true"></param>
−
<param name="movie" value="<nowiki>http://www.youtube.com/v/T6MhAwQ64c0&amp;hl=en_US&amp;fs=1?hd=1&amp;showinfo=0</nowiki>"></param><param name="allowFullScreen" value="true"></param>
+
 
<param name="allowscriptaccess" value="always"></param><embed <SPAN style="BACKGROUND-COLOR: #ffff00">wmode="opaque"</span> src="<nowiki>http://www.youtube.com/v/T6MhAwQ64c0&amp;hl=en_US&amp;fs=1?hd=1&amp;showinfo=0</nowiki>"  
 
<param name="allowscriptaccess" value="always"></param><embed <SPAN style="BACKGROUND-COLOR: #ffff00">wmode="opaque"</span> src="<nowiki>http://www.youtube.com/v/T6MhAwQ64c0&amp;hl=en_US&amp;fs=1?hd=1&amp;showinfo=0</nowiki>"  
 
type="application/x-shockwave-flash"
 
type="application/x-shockwave-flash"

Revision as of 18:13, 16 September 2011

When using Drop Down Navigation, your drop down menus are overlapped by Flash elements, such as an embedded YouTube video on your Feature Slider.

This is because the default behavior for Flash always overlap any sort of HTML attempting to be layered on top of it. Fixing that so that drop down menus appear correctly above the flash requires an easy modification to the way flash videos are embedded on the website.

YouTube's iframe embed code

Add the following parameter to the URL: 

   ?wmode=opaque

Before:
<iframe width="516" height="380" src="http://www.youtube.com/embed/T6MhAwQ64c0" frameborder="0" allowfullscreen></iframe>

After:
<iframe width="516" height="380" src="http://www.youtube.com/embed/T6MhAwQ64c0?wmode=opaque" frameborder="0" allowfullscreen></iframe>

YouTube's older embed code

There are two parameters you need to add to your embed code.

  1. Add the following directly after your opening "object" tag: 
   <param name="wmode" value="opaque"></param>
  1. Add the following within your embed tag: 
   wmode="opaque"

Before:
<object width="516" height="380"><param name="movie" value="http://www.youtube.com/v/T6MhAwQ64c0&hl=en_US&fs=1?hd=1&showinfo=0"></param><param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/T6MhAwQ64c0&hl=en_US&fs=1?hd=1&showinfo=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="516" height="380"></embed> </object>

After:
<object width="516" height="380"><param name="wmode" value="opaque"></param><param name="movie" value="http://www.youtube.com/v/T6MhAwQ64c0&hl=en_US&fs=1?hd=1&showinfo=0"></param><param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param><embed wmode="opaque" src="http://www.youtube.com/v/T6MhAwQ64c0&hl=en_US&fs=1?hd=1&showinfo=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="516" height="380"></embed> </object>

Retrieved from "http://www.pagelines.com/wiki/index.php?title=Drop_Down_Navigation_Falls_Behind_YouTube_Video&oldid=984"