Comment positionner une video par dessus une image ?

Version imprimable

Bonjour tout le monde,

voila je suis nouveau dans le HTML, a vrai dire c'est pas mon domaine... je veux personnaliser ma page facebook, donc j'ai pris le "Static HTML" et j'ai téléchargé "KompoZer" je me suis dis j'aurai pas de problème mais je me suis gouré, j'ai pas réussi a mettre une vidéo au dessus d'une image, sur "KompoZer" je vois le petit carré là avec "OBJECT" mais quand je test sur facebook y a rien !
voila le code que j'utilise, je l'ai choppé sur un forum trouver sur le net :
Code:

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 <html> <head> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> </head> <body> <title>EVANCE</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #img_and_obj_holder { position:relative; width:520px; /* this width is equal to the image map width */ height:700px; /* this height is equal to the image map height */ margin:auto; } #img_and_obj_holder img { position:absolute; width:100%; height:100%; border:0 solid; } #img_and_obj_holder object { position:absolute; width:258px; height:223px; left:100px; top:100px; } </style> <div id="container"> <div id="img_and_obj_holder"><img src="http://i1202.photobucket.com/albums/bb379/mouloudia007/fb001.jpg" usemap="#Map" alt=""><object type="application/x-shockwave-flash" data="<iframe width=" 258="" src="http://www.youtube.com/embed/Ax2zR346yj4" height="193"><param name="movie" value="http://www.youtube.com/embed/Ax2zR346yj4"><param name="wmode" value="transparent"></object></div> </div> </body> </html>
comme vous pouvez voir j'ai utilisé un cadre ( en feu ^^ ) pour mettre ma vidéo dedans, mais j'ai pas réussi =(

des idées d’où le problème provient ?

Merci d'avance les gars, et désolé si j'ai fais des fautes ^^

Paix !

08/07/2011, 21h01
RomainVALERI

Les fautes, pas grave, on est rodés ^^
Mais par contre si tu pouvais faire une petite modif sur ton post : modifie les balises autour de ton extrait. [quote][/quote] c'est fait pour les citations en langage naturel. Pour le code, utilise [code][/code] sinon à la fin de la journée on a les yeux comme ça :calim2:

;)
08/07/2011, 22h02
mouloudia007

j'ai pas vraiment compris ce que tu voulais idre, mais j'ai quand meme modifier le truc, j'ai ajouté la balise =)

en attendant une réponse pour mon probleme.
08/07/2011, 22h34
RomainVALERI

On dirait qu'il y a eu un drôle de mélange au moment du copier-coller :? Les balises title, meta et style devraient plutot être dans la partie head, non ? ^^

(et merci pour les balises code :mrgreen: ... c'est juste dommage d'avoir laissé les balises quote autour :aie:)
08/07/2011, 23h12
mouloudia007

ah désolé j'avais oublié le QUOTE de toute façon un admin est passé par là ^^

a vrai dire ce code je l'ai trouvé sur le net, j'ai fais que modifier les liens de l'image et de la vidéo, comme je l'ai expliqué en haut sur "KompoZer" ( parce que je suis nouveau mais genre vraiment nouveau dans le HTML ^^ ) j'ai mon image correctement et j'ai un cadre avec écrit OBJECT (la vidéo normalement) mais quand j’insère le code dans le STATIC HTML (appli facebook) j'ai l'image mais pas la vidéo ! alors qu'est ce que j'ai fais, j'ai changé le format de l'image, de JPG en PNG pour la transparence ... mais toujours rien =(
08/07/2011, 23h26
RomainVALERI

Citation:

Envoyé par mouloudia007

alors qu'est ce que j'ai fais, j'ai changé le format de l'image, de JPG en PNG pour la transparence ... mais toujours rien =(

:?
<question à deux balles mais vaut mieux être sur>
Tu as modifié le format de l'image ? (si oui, avec quel logiciel de traitement d'image ? photoshop ? gimp ? autre ?) Ou tu as juste renommé le fichier de .jpg en .png ? ^^'
</question à deux balles mais vaut mieux être sur>

Salut,

Voici un code indenté pour une meilleure lisibilité.

Code:

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
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>EVANCE</title>
	<style type="text/css" media="screen">
		#container {
			position:relative;
			width:520px; /* this width is equal to the image map width */
			height:700px; /* this height is equal to the image map height */
			margin:auto;
			background:url('http://i1202.photobucket.com/albums/bb379/mouloudia007/fb001.jpg') no-repeat left top;
		}
		#container iframe {
			position:absolute;
			width:258px;
			height:223px;
			left:131px;
			top:100px;
			margin:0;padding:0;
			border:none;
		}
	</style>
</head>
<body>
	<div id="container">
		<iframe width="258" height="223" src="http://www.youtube.com/embed/Ax2zR346yj4"></iframe>
	</div>
</body>
</html>

L'élement HTML ayant l'Id container est stylé de manière à contenir l'image en arrière-plan.

Si tu veux remplacer le cadre (<iframe>) par la balise (<object>), il faudra aussi remplacer...

Code:

#container iframe

par

Code:

#container object

08/07/2011, 23h54
mouloudia007

@RomainVALERI désolé je me suis mal exprimé, j'ai traité l'image avec photoshop et tout ( c'est vrai que je suis nul en HTML mais PS je suis un pro un peu ^^ )

@Eric2a j'ai pas saisi ce que tu as dit là :cry: tu pense que le probleme vient de là ? ( faut remplacer <iframe> par <object> ? ... classe le code maintenant merci a toi =)

Ici peu importe que tu utilises iframe ou bien object... À partir du moment où c'est bien codé. Dans ton code, la balise object est complétement cassée.

Ensuite, l'image en arrière-plan n'était qu'une suggestion. Ta technique initiale est tout aussi bien adaptée à ton cas.

Voici à nouveau ton code initial avec la balise object réparée :)

Code:

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
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>EVANCE</title>
	<style type="text/css" media="screen">
		#img_and_obj_holder {
			position:relative;
			width:520px; /* this width is equal to the image map width */
			height:700px; /* this height is equal to the image map height */
			margin:auto;
		}
		#img_and_obj_holder img {
			position:absolute;
			width:100%;
			height:100%;
			border:0 solid;
		}
		#img_and_obj_holder object {
			position:absolute;
			width:258px;
			height:223px;
			left:100px;
			top:100px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="img_and_obj_holder">
			<img src="http://i1202.photobucket.com/albums/bb379/mouloudia007/fb001.jpg" usemap="#Map" alt="" />
 
			<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/Ax2zR346yj4?version=3&amp;hl=fr_FR&amp;rel=0" width="258" height="223">
				<param name="movie" value="http://www.youtube.com/v/Ax2zR346yj4?version=3&amp;hl=fr_FR&amp;rel=0"></param>
				<param name="allowFullScreen" value="true"></param>
				<param name="allowscriptaccess" value="always"></param>
				<param name="wmode" value="transparent" />
			</object>
		</div>
	</div>
</body>
</html>

09/07/2011, 01h38
mouloudia007

EXCELLENT ! ça marche !! mille merci mon frere, un grand merci du fond du coeur ! je sais mem pas quoi dire ^^ sérieusement merci mon frere.