Friday, June 12, 2009

Firefox scrolling issues with EMBED video

7.18.2011 Update: This issue still exists in Firefox 5

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>

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>

1 comment:

  1. Yes, wmode seems to repair the issue. Thanks a lot

    ReplyDelete