[Drupal] How to fix the problem of z-index being ignored in iframe for youtube video

Iframe for youtube video ignores the z-index added to it. This happens because iframes are "heavyweight" objects as compared to div. So, the iframe overlays over other div and z-index gets ignored. Read on to know more about setting z-index for iframe .

We have a very simple solution.You just have to add ?wmode=opaque to the embedded URL.

Default code:

<iframe width="306" height="144"  frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="http://www.youtube.com/embed/video_id" id="video_frame"></iframe>

Replace this code with the following code.

<iframe width="306" height="144"  frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="http://www.youtube.com/embed/video_id?wmode=opaque" id="video_frame"></iframe>

Remember to replace the src URL with the correct URL with the video_id for your video.

This sets the z-index for iframe. Hope this helps.