Problema impostazioni opacity all'interno dei tag <div>

[danielepalmas88]

Sto impostando mediante css le proprietà di un 'button' con la funzione Play che ho inserito su un video player (tag <video> di html5).

Partendo da un tutorial, ho modificato tutto ciò che potevo, ma mi sono bloccato ad un punto dal quale non riesco più ad andare avanti...

.vid {
opacity: .8;
}

.vid:hover {
opacity: .7;
}

.controls {
opacity: .8;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
-ms-transition: opacity .3s;
transition: opacity .3s;
}

.controls:hover {
opacity: 1;
}

button {
background: rgba(0,0,0,0);
border: 0;
color: #EEE;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}

button:hover {
cursor: pointer;
}

Vorrei far sì che l'opacity iniziale che ho impostato al tag <vid> scompaia dopo aver premuto PLAY.
Mentre così com'è ora, anche il video parte opacizzato a 0.8

EDIT: In alternativa, esiste un modo per opacizzare il poster?

Ho provato...

poster {
opacity: .5;
}

...ma non funziona

video_poster{
opacity: .5;
}

idem, non funziona...

video[poster] {
opacity: .5;
}

invece funziona, ma intacca anche il resto dello sfondo del video, e non il poster da solo come servirebbe a me...