Drop Down Navigation Falls Behind YouTube Video
| (24 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
[[category:Draft]] | [[category:Draft]] | ||
| − | When using Drop Down Navigation, your drop down menus are overlapped by Flash elements, such as an embedded YouTube video | + | [[File:Drop_Down_Menu_behind_YouTube.png|200px|thumb|right|alt=Drop Down Menu behind YouTube|Drop Down Menu behind YouTube]] |
| + | When using [[Glossary#Drop Down Navigation|Drop Down Navigation,]] your drop down menus are overlapped by Flash elements, such as an embedded [http://www.YouTube.com YouTube] video on your [[Glossary#Features Section|Features Section.]] | ||
| − | 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 | + | 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 your website. There are two methods of modifying the code, and they depend on whether you are using YouTube's newer iframe code or the older embed code. |
==YouTube's iframe embed code== | ==YouTube's iframe embed code== | ||
| − | Add the following parameter to | + | Add the following parameter to your embed code: |
| − | ?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== | ||
| − | There are two | + | There are two parameters you need to add to your embed code. |
| − | # Add <param name="wmode" value="opaque"></param> | + | # Add the following directly after your opening "object" tag: |
| − | # Add wmode="opaque" | + | <param name="wmode" value="opaque"></param> |
| + | # Add the following within your embed tag: | ||
| + | wmode="opaque" | ||
| − | <object width="516" height="380"> | + | '''Before:'''<br /> |
| − | <param name=" | + | <object width="516" height="380"><param name="movie" value="<nowiki>http://www.youtube.com/v/T6MhAwQ64c0&hl=en_US&fs=1?hd=1&showinfo=0</nowiki>"></param><param name="allowFullScreen" value="true"></param> |
| − | + | <param name="allowscriptaccess" value="always"></param><embed src="<nowiki>http://www.youtube.com/v/T6MhAwQ64c0&hl=en_US&fs=1?hd=1&showinfo=0</nowiki>" | |
| − | <param name="allowFullScreen" value="true"></param> | + | |
| − | <param name="allowscriptaccess" value="always"></param> | + | |
| − | <embed | + | |
type="application/x-shockwave-flash" | type="application/x-shockwave-flash" | ||
allowscriptaccess="always" | allowscriptaccess="always" | ||
| Line 34: | Line 34: | ||
height="380"></embed> | height="380"></embed> | ||
</object> | </object> | ||
| + | <br /><br /> | ||
| + | '''After:'''<br /> | ||
| + | <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&hl=en_US&fs=1?hd=1&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&hl=en_US&fs=1?hd=1&showinfo=0</nowiki>" | ||
| + | type="application/x-shockwave-flash" | ||
| + | allowscriptaccess="always" | ||
| + | allowfullscreen="true" | ||
| + | width="516" | ||
| + | height="380"></embed> | ||
| + | </object> | ||
| + | <br /><br /> | ||
| + | [[File:Drop-Down-Menu-in-front-YouTube.png|200px|thumb|right|alt=Drop Down Menu Displayed Correctly|Drop Down Menu Displayed Correctly]] | ||
| + | Now you will see the Drop Down Menu correctly displayed in front. | ||
| + | * This method also helps fix transition problems when switching to and from a YouTube video and using the "Fade" transition | ||
Latest revision as of 22:49, 17 November 2011
When using Drop Down Navigation, your drop down menus are overlapped by Flash elements, such as an embedded YouTube video on your Features Section.
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 your website. There are two methods of modifying the code, and they depend on whether you are using YouTube's newer iframe code or the older embed code.
[edit] YouTube's iframe embed code
Add the following parameter to your embed code:
?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>
[edit] YouTube's older embed code
There are two parameters you need to add to your embed code.
- Add the following directly after your opening "object" tag:
<param name="wmode" value="opaque"></param>
- 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>
Now you will see the Drop Down Menu correctly displayed in front.
- This method also helps fix transition problems when switching to and from a YouTube video and using the "Fade" transition