For example:

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/2TmfGoJEgwg?wmode=opaque” frameborder=”0″ allowfullscreen></iframe>

Original Post Starts Here……

Javascript menus which drop down from a main navigation menu (mouse over “About” on this site to see a single item dropdown as an example) have a nasty habit of getting layered behind an embedded video. I haven’t tested this fix on all videos but if you’re embedding YouTube or other videos with similar embed code there is an easy solution.

In your parameter tags you need to add the following tag

So your final source may look like this (code is from the OpenCa.mp video we released).

That should keep your menus from dropping behind your video. Don't forget to add this to each video that is near your nav!

So to help things along I’ll give you 5 things I always do by default to help build my sites to look good on all browsers right out of the gate. This doesn’t mean that more tweaking isn’t sometimes required but these get me a long way toward the goal.
1. IE6 Double Margin Issue. This has been well documented but bears repeating here. If you are just starting with css based layouts (as opposed to table based layouts) this will save you hours of maddening trouble shooting. The problem is that IE6 will double the margin that is in the same direction of a float. For example, if you float two boxes to the left and next to each other and the left box has a left margin of 10px, in IE6 you will get a left margin (on the left box) of 20px. It’s a bug, don’t try to understand it. So it would render as below:

How it should look, and does, in FireFox.

IE6 float:Left with no display:inline;

The code in the case of this example was as follows:

Fortunately, the fix is rather easy, make sure to add display:inline; to the float:left; and the margin will correct itself as below:

IE6 float:Left with display:inline;

2. This is a design technique. When I’m building a new theme from scratch I’ll often start with all of my margins set to 0px. Boxes will float next to each other but I’ll move them out later. I first work through padding on my div’s then start to adjust margins. Once you’ve build a site/theme or two it get’s much easier but I’ve found it to be quicker and easier to start with 0 margins and work from there rather than going back and trying to figure out why things do work correctly cross-browser after development.

3.Image Resizing in CSS. The quick lesson here is don’t do it. Generally browsers do a less than ideal job of dynamically rendering the image and cross-browser it can create inconsistencies. On top of that, and a better reason not to do it, is that you still have to load the full image on that page which makes your page weight (how much “stuff” has to be downloaded for the page to fully render) much heavier and thus slower. The easy solution is just don’t do it, re size your images (and optimize them) with another tool and upload accordingly.

4. Clear Your Floats: This refers to divs which serve as containers to other divs and should wrap around them but sometimes don’t. So when you create a wrapper with div’s inside it should look like this:

How the container should wrap around div's

But sometimes they end up like this:

What sometimes happens to containers

The biggest problem is that you may not notice it until you try to put a background in place and it doesn’t look right. The issue can generally be fixed by adding “overflow: auto;” or “overflow:hidden;” to the containing div. You’ll also want to make sure to specify a width or heigh to trigger hasLayout for IE6 compatibility (use something like height: 1% if you need to, works well). However, if you still don’t get it to work you might need to find another way of clearing the floated div.

5. Font Sizing: In the body tag of your style sheet set your font as a percentage of the default size (16px). So for a 12pt font set the font size to 75% (font-size: 75%) then throughout the remainder of the body where you set font size do so using em (not px or pt).For more reading on em’s see How to Size Text in CSS at A List Apart.

There are more good techniques but this should get you a long way toward greater CSS cross-browser compatibility right out of the gate. Another good read on the topic:

Anthony Short: How to get Cross Browser Compatibility Every Time