Discussion :

[pito2901]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[rodolphebrd]

Bonjour et bienvenue,

souhaitez-vous un effet comme celui-ci
A vous de régler l'effet de zoom au survol du bloc...

[pito2901]

Absolument pas, désolé, j'ai oublié de citer mon exemple ici

Ce que je souhaite c'est que le block reste ouvert lors de la lecture de la vidéo lors d'un clic qui déclenche la lecture de la vidéo

[rodolphebrd]

Ok.

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).

Je verrais une solution en JavaScript...

[pito2901]

Non, c'est juste un changement de :hover vers :active ou :focus, j'en sais trop rien...

[rodolphebrd]

Vous avez une piste sur ce site
Je vous conseille de poster votre question dans le forum JavaScript.

[pito2901]

Non pas vraiment...

[Bisûnûrs]

Non pas vraiment...

Ca serait plus constructif de dire en quoi le post de rodolphebrd ne t'aide pas.

De toute manière, si ta vidéo ne communique pas avec la page via Javascript, toutes les solutions que tu mettras en place ne seront que de la bidouille qui fonctionnera une fois sur trois.

[pito2901]

Bien, alors avez-vous une solution en javascript qui pourrait réaliser ce changement :hover vers :active ou :focus lors du clic qui déclenchera la lecture de la vidéo ?