Last Updated: March 26, 2019
· wjonthomas

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="" 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:

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.

1 Response
Add your response

Hi there, Thansk for your code above. Could you please show me how you would then overlay an image over the imbedded youtube

over 1 year ago ·