Overlay a HTML element above an embedded youtube iframe

When embedding something like a youtube videos, you may also want to be able to position other elements on top of it, with some sort of absolute positioning. Simply setting your z-indexes won't do the trick.

This can be achieved using the wmode=opaque option after your youtube link url. For example:

<iframe width="560" height="315" src="http://www.youtube.com/embed/pzfAdmAtYIY?wmode=opaque" frameborder="0" allowfullscreen></iframe>

In the code above, after the /embed/videoID I've added ?wmode=opaque.

Make sure that's the first thing you add after the video ID in the url. Then, you can add your other options with the & sign, such as ?wmode=opaque&showinfo=0&autohide=1.

Hope that helps someone.

Also, here's a link to some official Adobe info documenting the issue: http://helpx.adobe.com/x-productkb/multi/swf-file-ignores-stacking-order.html

Use case: my particular use case was that I needed pagination controls for a slider to appear over top of an embedded video. Worked like a charm.