CSS pour un block contenant une vid�o
Bonjour � tous !
Mon souci est le suivant:
Je cherche � obtenir un code css qui permet � un block div de rester ouvert lors du clic d'une vid�o qui se trouve � l'int�rieur de ce div. Pour �tre plus clair, je cherche comment avoir la position suivante:
______________
|nom de la vid�o |
|_____________|
et lors du survol de la souris sur ce block, il se passe ceci:
______________
|nom de la vid�o | // la souris se trouve d'abord sur le titre "nom de la vid�o"
| | puis le block s'ouvre avec la vid�o en position de
| "vid�o en | d�marrage et qui attend le clic de la souris.
| position de | Mais si on ne clique pas et qu'on enl�ve la souris du block
| d�marrage" | ou du titre du block, celui ci se referme comme
|_____________| pr�c�demment.
Et j'aimerais que lorsque que la vid�o est activ�e, c'est � dire qu'on a d�clench� le d�roulement de la vid�o lors d'un clic de la souris, que le block reste ouvert.
Et pour allez plus loin si possible, que ce block reste ouvert lors de la lecture de la vid�o puis le block se referme � la fin de celle-ci, c'est � dire avec un code de temps d�fini � l'avance (qui en fait est la dur�e de la vid�o).
Le code CSS se ferait avec Les pseudo-classes d'action usager :hover, :active, et :focus
Voici mon code html pour une seule vid�o
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <style>
.videos_astuces
{
width:900px;
height:18px;
overflow:hidden;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
border: 1px solid #0060F0;
border-radius: 5px;
}
.videos_astuces:hover{height:524px;} // c'est ici qu'il y a modifications...
</style>
<br />
<div class="videos_astuces">
<div id="changer_le_volume_d_une_chanson_et_l_exporter_en_mp3_avec_audacity">
</div>
<div class="menu_deroulant_astuce">
<span style="font-family: Verdana, sans-serif;">Changer le volume d'une chanson et l'exporter en mp3 avec Audacity</span></div>
<div class="content_box" style="overflow: none;">
<iframe frameborder="0" height="506" src="http://www.youtube.com/embed/1cefBcHaz_U" width="100%"></iframe></div>
</div> |
En esp�rant avoir une r�ponse.
Cordialement.
