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:
http://www.youtube.com/embed/weiourywoieuy

?wmode=transparent

If there are paremeters like ?rel=0 add it to the end with an ampersand:
http://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('/("http:\/\/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

Get In Touch

We would love to hear from you.

Please enter your email address.
Please enter a valid email address.
Please enter the verification number.
You have entered a wrong verification number.
Please enter a message.
Please check your message for any errors.
Your message has been sent successfully.
Sorry, error occured this time sending your message.
* required