Drop Down Navigation Falls Behind YouTube Video
(→YouTube's older embed code) |
|||
| Line 9: | Line 9: | ||
?wmode=opaque | ?wmode=opaque | ||
| − | ''' | + | '''Before:'''<br /> |
<iframe width="516" height="380" <nowiki>src="http://www.youtube.com/embed/T6MhAwQ64c0</nowiki>" frameborder="0" allowfullscreen></iframe> | <iframe width="516" height="380" <nowiki>src="http://www.youtube.com/embed/T6MhAwQ64c0</nowiki>" frameborder="0" allowfullscreen></iframe> | ||
| − | ''' | + | '''After:'''<br /> |
<iframe width="516" height="380" | <iframe width="516" height="380" | ||
| − | <nowiki>src="http://www.youtube.com/embed/T6MhAwQ64c0</nowiki>< | + | <nowiki>src="http://www.youtube.com/embed/T6MhAwQ64c0</nowiki><SPAN style="BACKGROUND-COLOR: #ffff00">?wmode=opaque</span>" frameborder="0" allowfullscreen></iframe> |
==YouTube's older embed code== | ==YouTube's older embed code== | ||
| Line 24: | Line 24: | ||
wmode="opaque" | wmode="opaque" | ||
| + | '''Before:'''<br /> | ||
| + | <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:'''<br /> | ||
<object width="516" height="380"><param name="wmode" value="opaque"></param> | <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="movie" value="http://www.youtube.com/v/T6MhAwQ64c0&hl=en_US&fs=1?hd=1&showinfo=0"></param><param name="allowFullScreen" value="true"></param> | ||
Revision as of 17:38, 16 September 2011
When using Drop Down Navigation, your drop down menus are overlapped by Flash elements, such as an embedded YouTube video in 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 elements you need to add to your embed code.
- Add the following parameter directly after your opening "object" tag:
<param name="wmode" value="opaque"></param>
- Add the following parameter 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>