1 pièce(s) jointe(s)
Lancer video YT iframe depuis un autre élément
Bonjour, bonsoir.
Dans l'optique de faire un style où les vidéos importées depuis YouTube semblent être accrochées par du rubans adhésif, je cherche un moyen de lancer une vidéo iframe depuis un autre élément.
Je m'explique : afin de réaliser ce style, j'ai placé un div sur l'iframe et appliqué à ce div un background :
Code:
1
2
3
4
| <div id="video">
<iframe id="iframe" width="560" height="315" src="http://www.youtube.com/embed/I-j7-M0E7Eo" allowfullscreen></iframe>
<div onclick="document.getElementById('iframe').click()"></div>
</div> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| iframe
{
border:none;
}
#video
{
margin:10px;
padding:50px;
background:url('bgvideo.png') no-repeat;
border:none;
position:absolute;
}
iframe + div
{
position:relative;
top:-320px;
left:0;
width:560px;
height:315px;
background:url('bgvideo.png') -50px -50px no-repeat;
} |
Et j'ai un résultat visuel qui correspond parfaitement à ce que je cherche : Pièce jointe 150713.
Cependant, il est maintenant impossible de cliquer pour lancer la vidéo (logique, puisqu'il y a le div dessus). Du coup, j'ai tenté de faire en sorte de lancer la vidéo quand on cliquer sur le div qui a le background, grâce à <div onclick="document.getElementById('iframe').click()"></div>, mais ça ne marche pas... J'ai essayé quelque chose d'encore plus moche, en passant en display:none; le iframe+div:hover, mais outre le fait que ça soit hideux, les marges bougent dans tout les sens au passage de la souris.
Avez-vous des suggestions pour lancer la vidéo en cliquant sur le div, ou une autre idée pour attribuer ce genre de style à un vidéo ?
Merci d'avance !
Codepen : http://codepen.io/anon/pen/svkzm.
