WordPress Tricks: How to fix the issue of YouTube videos appearing on top of other content

Here is the code I use to make sure the embedded YouTube videos on a website don’t appear on top of other content (for example: drop down menus):

<object width='400' height='350'> 
    <param name='movie' value='http://www.youtube.com/YOURVIDEOLINK'> 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <span style="color: #ff0000;"><param name="wmode" value="opaque" /></span>
    <embed width='400' height='350'
            src='http://www.youtube.com/YOURVDIDEOLINK'
            type='application/x-shockwave-flash'
            allowfullscreen='true'
            allowscriptaccess='always'
           <span style="color: #ff0000;"> wmode="opaque"</span>
    ></embed> 
    </object>

The areas of code highlighted in red above are what solve the overlapping/z-index problem, so if you already have your video embedded on your site, simply add those sections in the right place in your code and that should solve the issue.

NOTE: I found this solution at http://australiansearchengine.wordpress.com/2010/06/19/youtube-video-css-z-index/

Meet the author

Libby Fisher is an experienced freelance web developer, recently relocated from Seattle to Boston, and passionate about developing websites that are both aesthetically appealing and intuitively usable - or as she prefers: "beautifully effective."