How to fix z-index in YouTube videos

Add a parameter to force YouTube iframe to set a low z-index.

If you have any element you’ll like to show above a YouTube iframe you just have to add a parameter to the iFrame URL.

wmode=transparent

Add the wmode parameter in the src URL.

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/asfdsafsdfWSDF?wmode=transparent" frameborder="0"></iframe>

If you have YouTube videos that appear infront of your other website content and giving it a lower z-index does not seem to do the trick then try adding the wmode parameter to the embedded movie.

<object width='425' height='344'> 
    <param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'> 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <param name="wmode" value="transparent" />
    <embed width='425' height='344'
            src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'
            type='application/x-shockwave-flash'
            allowfullscreen='true'
            allowscriptaccess='always'
            wmode="opaque"
    ></embed> 
    </object>