How to Embed YouTube Videos with a Z-Index, layering html elements

If you have a youtube video embedded within your web page that ignores the z-index of fixed or absolutely positioned DIV elements then here is both the html fix.

Add the parameter: wmode=transparent

Before:

<iframe width=”640″ height=”360″ src=”http://www.youtube.com/embed/z5abFrz_4HM” frameborder=”0″ allowfullscreen></iframe>

After:

<iframe width=”640″ height=”360″ src=”http://www.youtube.com/embed/z5abFrz_4HM?wmode=transparent” frameborder=”0″ allowfullscreen></iframe>

Was this blog post helpful for you?

Support my blog and donate!

My blog is open to the public and will always be freely available. With your donation, we can help others learn, together.