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> |
Partager