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>