Bonjour à tous !

Débutant dans la programmation et surtout dans le javascript, je recherche le code qui permet de résoudre ce problème:

1° Je dispose d'un div contenant une vidéo youtube, donc un iframe.

2° Le code CSS que j'ai appliqué permet d'ouvrir ce div et de pouvoir lire la vidéo mais en laissant le curseur de la souris dans cette zone (via le :hover)

3° Ce que je recherche, c'est le code et comment l'appliquer pour qu'à un seul clic, qui déclenchera la lecture de la vidéo, le div reste ouvert, mais s'il n'y a pas de clic, le div se referme.

Voici mon code html et css réunis ici (codepen n'affiche pas les vidéo, mais un clic dans sa zone de celle-ci déclenchera sa lecture)

Voici la page concernée

A present j'obtiens ce code qui ne réponds pas à tous mes critères je demande donc votre aide:

Code Html : 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!-- De base : ta vidéo est affichée entièrement.
 
En JS : tu la caches.
 
Avec l'évènement mouseover, tu détectes le passage de la souris sur le div contenant l'iframe pour l'ouvrir.
 
Tu crées une variable valant false au départ.
 
Avec l'évènement onclick, tu détectes le lancement de la vidéo. Tu passes ta variable à true.
 
Lors de l'évènement onmouseout, tu regardes si l'utilisateur a cliqué, c'est-à-dire si la variable est à true ou non.
 
Tu agis en conséquence. -->
 
<head>
<script type="text/javascript">
function visibilite(divideo)
{
var titre;
titre = document.getElementById(divideo) ;
if (titre.style.display == "none")
{titre.style.display = "" ;}
else
{titre.style.display = "none" ;}
}
function value(video) {
var lecture;
lecture = document.getElementById(video) ;
    if (titre.style.display == "none")
    {lecture.value = "false" ;}
    else
    {
        if (lecture.value == "true")
        {titre.style.display = "";}
        else
        {titre.style.display = "none";}
    }
}
</script>
 
<style>
.block_video{
width:900px; height:524px; overflow:hidden;
border: 1px solid #0060F0; border-radius: 5px;
}
.video{
width:900px; height:524px; overflow:hidden;
}
iframe{
height:506px; width:100%;
}
a{color:red;text-decoration:none;}
a:hover{color:green;text-decoration:none;}
</style>
</head>
<body>
 
<div class="block_video">
<a href="" onmouseover="javascript:visibilite('divideo'); return false;" >Video d'exemple</a>
<div id="divideo" class="video" style="display:none">
<iframe id="video" onclick="javascript:video('lecture'); return true;" frameborder="0" src="http://www.youtube.com/embed/1cefBcHaz_U"></iframe>
</div>
</div>
 
</body>