Community

Stay in the Loop

How to Stop YouTube Videos from overlapping the Social Toolbar

Do your YouTube videos in your wordpress blog post overlap the Social Toolbar like this:

youtube wmode opaque overlapp fix

The Toolbar plugin cannot control the Z Index of YouTube videos. But there is a fix. All you have to do is add “?wmode=Opaque” after the URL in the embedded code. Below is an example of how your Youtube Iframe embedd code should look.

Before:

<iframe title="YouTube video player" width="512" height="312" src="http://www.youtube.com/embed/XxXxXxXxX" frameborder="0" allowfullscreen></iframe>

After:

<iframe title="YouTube video player" width="512" height="312" src="http://www.youtube.com/embed/XxXxXxXxX?wmode=Opaque" frameborder="0" allowfullscreen></iframe>

UPDATE: If this fix does not work for Chrome, then use “wmode=transparent” instead.

You can also Fix this using jQuery for your full site. This will not only fix any new iFrame videos added to your website but all previous iFrame videos as well. Go here to see how:
http://www.daddydesign.com/wordpress/fixing-youtube-iframe-z-index-using-jquery/

Leave a Comment