So I decided to go looking for a fix to a problem I've had with Firefox for a while now... Sadly it turns out to be a flaw in the way Firefox handles the embed code (at least up to 3.0.11 and earlier).
The workaround requires every single website to update the way they embed video from sources like YouTube (yeah right). Or we have to wait for a formal fix to the issue - Sadly as this still unaccepted bug request from 1/22/2009 shows it doesn't look like it will be fixed anytime soon.
In the mean time this is how to workaround it, simply add the following tag to any YouTube embed code (and I assume any other embed video from similar sites).
wmode="transparent"
Example (which works in IE, but not Firefox - this is YouTube Default):
<object width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/qufAFY7FL0U&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/qufAFY7FL0U&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295">
</embed>
</object>
<param name="movie" value="http://www.youtube.com/v/qufAFY7FL0U&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/qufAFY7FL0U&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295">
</embed>
</object>
Example (which works in both browsers):
<object width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/qufAFY7FL0U&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/qufAFY7FL0U&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295" wmode="transparent">
</embed>
</object>
<param name="movie" value="http://www.youtube.com/v/qufAFY7FL0U&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/qufAFY7FL0U&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295" wmode="transparent">
</embed>
</object>
Yes, wmode seems to repair the issue. Thanks a lot
ReplyDelete