Bootstrap Modal vs Youtube Video z-index Issue

Question

I am using a Twitter Bootstrap Modal and Youtube Video on the same page. I am facing Z-Index Problem where the Video is being displayed above the modal window in Chrome Browser.

How can i solve this issue ?

http://mink7.com/projects/cmrc/home.html

Answer 1

You should use YouTube urls with ?wmode=transparent param.

<iframe src="http://www.youtube.com/embed/EBSnWlpTPSk?wmode=transparent"></iframe>

If you include your object/embed tag then you should add <param name="wmode" value="opaque" /> for object tags, wmode=transparent for embed tags.