BH Codebreaker - Get videos to stay behind it!
- Thread starter gangsta1
- Start date
oldenstylehats
Elite Member
- Apr 10, 2008
- 1,709
- 1,215
I originally wrote this for WP CodeBreaker, but I imagine this applies to any Javascript based overlay.
By default, most browsers place Flash elements above HTML elements in what is called the z-index stack. Unfortunately, some browsers won't allow the z-index CSS property to change that stack order, so certain browsers will allow Flash elements to "bleed-through" from behind HTML elements. It looks ugly, but luckily there is a quick fix. I'll use the example of a YouTube video.
By default, these are the basic pieces of the embed code that that YouTube passes when you copy the embed information:
We're interested in this bit in particular:
What we want to do is to tell Flash to load in a different mode. We can tell it to load itself with a special window parameter (wmode="transparent") by adding the following bit to the end of the above tag:
So, this would make our entire embed tag for YouTube:
By default, most browsers place Flash elements above HTML elements in what is called the z-index stack. Unfortunately, some browsers won't allow the z-index CSS property to change that stack order, so certain browsers will allow Flash elements to "bleed-through" from behind HTML elements. It looks ugly, but luckily there is a quick fix. I'll use the example of a YouTube video.
By default, these are the basic pieces of the embed code that that YouTube passes when you copy the embed information:
Code:
<object width="320" height="265"><param name="movie" value="http://www.youtube-nocookie.com/v/jiSBAykx9vA&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/jiSBAykx9vA&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>We're interested in this bit in particular:
Code:
<embed src="http://www.youtube-nocookie.com/v/jiSBAykx9vA&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265">What we want to do is to tell Flash to load in a different mode. We can tell it to load itself with a special window parameter (wmode="transparent") by adding the following bit to the end of the above tag:
Code:
<embed src="http://www.youtube-nocookie.com/v/jiSBAykx9vA&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265" wmode="transparent">So, this would make our entire embed tag for YouTube:
Code:
<object width="320" height="265"><param name="movie" value="http://www.youtube-nocookie.com/v/jiSBAykx9vA&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/jiSBAykx9vA&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265" wmode="transparent"></embed></object>
oldenstylehats
Elite Member
- Apr 10, 2008
- 1,709
- 1,215
Any WP Guardian customers that have this issue should PM me or email support with the URL of an example page so we can give you a hand.
oldenstylehats
Elite Member
- Apr 10, 2008
- 1,709
- 1,215
As far as I know, you don't have to. Have you experienced issues with this?
oldenstylehats
Elite Member
- Apr 10, 2008
- 1,709
- 1,215
Where are you embedding the video's from? I've never seen this behavior personally, but it sounds like it could be an issue with the flash video player of the site you're working with. The wmode parameter is pretty much the only way to get around the browser fuckery, because you can't dynamically change embed objects without loading them a second time.
oldenstylehats
Elite Member
- Apr 10, 2008
- 1,709
- 1,215
That very well could be an issue with some browsers. Best case scenario would probably be to do any sort of positioning you're trying to do with <div> tags instead of table tags. However, if tables are an absolute must you might want to try applying z-index and position:absolute style parameters to your table. That might fix the issue in whatever browser you are testing in. I know IE has problems with embedded objects in tables.
Definitely report back if you have any luck!
dietbird
Junior Member
- Nov 3, 2009
- 126
- 65
What more can I say, timely and helping!
Just a heads up to all future buyers, you will need not worry about that when 1.3 comes out, which is in less than 48 hours.
blackhatZEN (Maan, I love that nick
) is a super cool guy, offers amazing support and is unbelievably patient. Even with my noobish persona, lol
At this moment, I can clearly state I have no problems with Wordpress Guardian and everything is working exactly as I wanted it to, maybe even better. It's an amazing piece of software with an even more amazing support. And at that price... Go buy it now, or you'll regret it later. I'm sure I would've.
Just a heads up to all future buyers, you will need not worry about that when 1.3 comes out, which is in less than 48 hours.
blackhatZEN (Maan, I love that nick
) is a super cool guy, offers amazing support and is unbelievably patient. Even with my noobish persona, lol At this moment, I can clearly state I have no problems with Wordpress Guardian and everything is working exactly as I wanted it to, maybe even better. It's an amazing piece of software with an even more amazing support. And at that price... Go buy it now, or you'll regret it later. I'm sure I would've.
keverone
Junior Member
- Oct 4, 2009
- 153
- 47
Yes, me me me >> have had a heck of a time trying to get this resolved...Everything works in fire fox but not IE.
Anyone reading this have the fix? major rep....