Site icon WP Smith

How to Ensure that Your Lightbox Is Not Behind Your Flash/YouTube Video

On one of the websites that I was building, I had Next-Gen Galleries and YouTube videos on the same page. In one instance, I would click on the image for the thickbox to appear and the YouTube video sat on top. The YouTube video was embedded as an iframe.

[html]<iframe height="360" frameborder="0" width="580" src="http://www.youtube.com/embed/odXK8yMCuwM?color1=234900&amp;color2=4e9e00&amp;border=0&amp;fs=1&amp;hl=en&amp;autoplay=0&amp;showinfo=0&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1" title="YouTube video player"></iframe>[/html]

So in order to add the wmode property to the video, I added &amp;wmode=Opaque to the end of the URL, so:

[html]<iframe height="360" frameborder="0" width="580" src="http://www.youtube.com/embed/odXK8yMCuwM?color1=234900&amp;color2=4e9e00&amp;border=0&amp;fs=1&amp;hl=en&amp;autoplay=0&amp;showinfo=0&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;wmode=Opaque" title="YouTube video player"></iframe>[/html]

Then I was able to view my lightbox/thickbox with no issues.