YouTube and Shadowbox.js overlay z-index

I had a problem while working on a new site. The site has YouTube videos embedded on the page with an IFRAME tag. YouTube uses flash to display these videos, and it was showing over the top of the Shadowbox overlays. I tried z-index, but this did not work. With a bit of looking I found that the flash wmode was not set to transparent. Here is the solution:

Add a parameter to the end of the YouTube embed url in the iframe tag.

If there are no parameters at the end, use this:
https://www.youtube.com/embed/weiourywoieuy

?wmode=transparent

If there are paremeters like ?rel=0 add it to the end with an ampersand:
https://www.youtube.com/embed/weiourywoieuy?rel=0

&wmode=transparent

Replacing this with PHP and preg_replace would be something similar to this:

$youtube_replaced = preg_replace('/("https://www.youtube.com/embed/)([A-Za-z0-9-]*)(.*?)(")/', '${1}${2}?wmode=transparent&rel=0${4}', $string);

The above example will set all of the YouTube paremeters window mode=transparent and related videos = 0, like this:

?wmode=transparent&rel=0

 

Visit sunny St. George, Utah, USA