Youtube (?wmode=opaque)

Ben bezig met een lay-out waarbij ik op de achtergrond een foto heb (over het hele scherm gevuld). Daarboven heb ik een content layer welke een opacity van 0.8 heeft. In de content heb ik een youtube video geplaatst. Boven de content heb ik een navigatie balk (met submenu's, horizontaal)Na lang zoeken kreeg ik het eindelijk voor elkaar dat het submenu bij hover niet achter het youtube filpje terecht kwam. Dit door gebruik te maken van '?wmode=opaque' achter de url van de youtube film.

Echter is het filpje nu wel transparant geworden (opacity 0.8). Iemand een idee hoe ik gewoon de opacity van de video op 1.0 krijg en de content layer 0.8 blijft?

Heb al geprobeerd een zwarte div erachter te plaatsen maar dat hielp niet.

css youtube-player:

.youtube-player {
	height: 495px;
	width: 880px;
	background-color: #000;
	opacity: 1.0;
}

css content

.content > article {
	min-height: 200px;
	width: 880px;
	background: #000;
	opacity: 0.9;
	border-radius: 10px;
	padding: 10px;
}

Html

<iframe class="youtube-player" src="//www.youtube.com/embed/(doet er niet toe?)?wmode=opaque" frameborder="0" allowfullscreen></iframe>