YouTube iframe video stays above overlays

I had a YouTube video staying on top of a jQuery lightbox overlay and knew from past experience that it requires setting the wmode = opaque. You can use transparent but opaque is apparently faster (see http://stackoverflow.com/questions/886864/differences-between-using-wmode-transparent-opaque-or-window-for-an-embed).

The problem was, YouTube videos are now being embedded via an iframe and I wasn’t sure how to go about getting the embed code to use the wmode setting.
I found an answer on YouTube itself from 360creations. All good. Just add &wmode=transparent to the end of the YouTube URL, that’s easy, except our administrators add the YouTube embed code (pulled from YouTube without the wmode code added) via an admin section and I needed a way to automate adding this using PHP.

Quick solution:

1
2
3
4
$youtube_embed_code = '<iframe src="http://www.youtube.com/embed/hTCAeGIBaxw" frameborder="0" width="560" height="345"></iframe>';
$patterns[] = '/youtube.com\/embed\/([a-zA-Z0-9._-]+)/';
$replacements[] = 'youtube.com/embed/$1?wmode=transparent"';
echo preg_replace($patterns, $replacements, $youtube_embed_code));

3 thoughts on “YouTube iframe video stays above overlays

  1. Pingback: youtube iframe video lightbox jquery z-index overlay &wmode=transparent « codesave

  2. Thank you ! I had this problem using the SimpleModal JQuery in a chrome browser. It’s solved now, great !

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">