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));

5 thoughts on “YouTube iframe video stays above overlays”

  1. Can you specify exactly where this code should be placed? I’m fairly new to PHP. Will it go on the same page that the videos are embedded somewhere else? Thanks! :o)

Leave a Reply

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