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.
