This is easy to fix- just add an extra parameter to your object embed- eg;

<object width="330" height="203" style="width: 330px; height: 203px;" data="http://www.youtube.com/v/PF9Q3LcOAQ8?fs=1&amp;amp;hl=en_GB&amp;amp;rel=0&amp;amp;border=1" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
...

Related posts:

• Transparent CSS Sprites – Smashing Magazine
• Flash backgrounds not showing in IE
• JQuery Accordion Control links not working

I just solved the last problem I faced on my home page at shawson.co.uk which employs an animated flash background.  I first saw this used on the PlayStation 3 web site where they had some swanky looking wavy lines moving about in the background (see screen shot on the right), and the whole site changed to a different colour every minute or so.  I thought this was a really cool effect but I wanted to make it more of a feature, so created a simple flash animation which showed the sky going through an accelerated day night cycle inspired by the fact that most of my good ideas happen while laying on the trampoline in the garden looking at the sky!

I created two div layers- the first is absolutely positioned and contains the actual content for the site (keeping content first for the sake of accessibility and SEO), which is situated in a small blue box which sits in the bottom right of the site and contains links to this site and a couple of others.  The second div contains the actual flash file and is set to 100% width and height to cover the whole area.  This all looked fine in Firefox, but didn’t seem to render the flash in ie6 or 7.

After a bit of experimentation, I found this to be due to the form tag which at the time engulfed the entire page (as the page is dot net and I used the Accordion control from the Ajax Control Library) – if I removed the form tag the flash would render.  I tried experimenting with CSS, ensuring no background colour was being applied to the form element, but nothing seemed to effect it.  I eventually fixed this by moving the form tag so it only encompassed content in my container div which holds my content, so the background flash layer sits outside of the form.

Despite fixing this issue, I’ve no idea why the form element would have hidden the flash in the first place, so if anyone can shed any light on this one, please leave a comment!

Related posts:

• Flash floating over the top of my div!
• CSS Sprites and a flickering problem in IE6
• ASP.net aspx pages posting back to the wrong URL when using Server Rewrite