Embedding Flash: don't forget wmode="transparent"
If you are doing a complex web layout (such as my
Swing and the City layout
which features alpha-transparent fixed layers), and want to embed Flash
(e.g. on the Was ist Swing?
page - German: What is Swing), make sure you add the attribute
wmode="transparent"
to your embed
tag, and
<param name="wmode" value="transparent"></param>
to
your object. Otherwise, a layer - in particular popup menus - might end up
below the flash.
This includes you, YouTube. In HD view, the user popup menu only has the top 3.5 entries out of 5 accessible for me.
The following XSLT stylesheet can be used to find such embeds in a bunch
of XHTML files using the command line
xsltproc findNoWmode.xslt $( find -iname '*.html' )
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:html="http://www.w3.org/1999/xhtml">
<xsl:output omit-xml-declaration="yes" indent="no"/>
<xsl:template match="/">
<xsl:call-template name="t"/>
</xsl:template>
<xsl:template name="t">
<xsl:copy-of select="//html:embed[not(@wmode) and (count(param[@name='wmode']) = 0)]"/>
</xsl:template>
</xsl:stylesheet>
You can of course also write a XSLT stylesheet to insert the wmode statements whenever there is none, to make transparent your default.
[Update: I’ve received comments that this comes at qutie a performance cost for Flash, and that this might be the reason why YouTube doesn’t use it
- in particular for the HD videos. Also it isn’t supported by WebKit based Browsers so far (so Safari neither?) and nor does it seem to be working in Gnash, an opensource flash plugin. So you have to choose between multiple evils if you are using Flash…]