Discussion :

[X260SH]

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 HTML :

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

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 CSS :

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

[SpaceFrog]

Il faut acceder aux element du parent ou de frames puis du contenu:
http://www.developpez.net/forums/d27...enetre-enfant/