I'm placing a youtube iframe in a content box that has 0.8 opacity
opacity: .8;
filter: alpha(opacity=80);
but the videos are showing transparent as well, as in you can see the background of the site through them. I've tried changing wmode every way possible but it makes no difference. This doesn't happen with Firefox, but it does in Chrome.
When you use the CSS property opacity on an element, all of its children will inherit it, and there is nothing you do to change it...
...except you can either use a transparent png background image, or use rgba() or hsla() color values.
So transparent black rgba would be background: rgba(0, 0, 0, .5); and hsla background-color: hsla(0, 0%, 0%, .5);
These properties are not inherited and so will not affect the children, whatever they are :)
Here you can see the three different CSS rules (not transparent png) in use. Note that the child elements of the last two are not affected :)