Comment positionner une video par dessus une image ? [Résolu]

mouloudia007 · 08/07/2011, 17h03

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 :

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
<html>
<head>
&lt;head&gt; &lt;meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type"&gt; &lt;title&gt;&lt;/title&gt;
</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="&lt;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 !

RomainVALERI · 08/07/2011, 21h01

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

mouloudia007 · 08/07/2011, 22h02

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.

RomainVALERI · 08/07/2011, 22h34

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

... c'est juste dommage d'avoir laissé les balises quote autour

)

mouloudia007 · 08/07/2011, 23h12

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 =(

RomainVALERI · 08/07/2011, 23h26

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>

Eric2a · 08/07/2011, 23h34

Salut,

Voici un code indenté pour une meilleure lisibilité.

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
<!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 css :

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

#container iframe

par

Code css :

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

#container object

mouloudia007 · 08/07/2011, 23h54

@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à

tu pense que le probleme vient de là ? ( faut remplacer <iframe> par <object> ? ... classe le code maintenant merci a toi =)

Eric2a · 09/07/2011, 01h14

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

mouloudia007 · 09/07/2011, 01h38

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.

08/07/2011, 21h01	#2
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 074 Points : 4 074	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 __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

08/07/2011, 22h34	#4
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 074 Points : 4 074	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 ... c'est juste dommage d'avoir laissé les balises quote autour ) __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

08/07/2011, 22h02	#3
mouloudia007 Invité de passage Étudiant Inscription : juillet 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Localisation : Algérie Informations professionnelles : Activité : Étudiant Secteur : Communication - Médias Informations forums : Inscription : juillet 2011 Messages : 5 Points : 1 Points : 1	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.
	00

08/07/2011, 23h12	#5
mouloudia007 Invité de passage Étudiant Inscription : juillet 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Localisation : Algérie Informations professionnelles : Activité : Étudiant Secteur : Communication - Médias Informations forums : Inscription : juillet 2011 Messages : 5 Points : 1 Points : 1	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 =(
	00

08/07/2011, 23h54	#8
mouloudia007 Invité de passage Étudiant Inscription : juillet 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Localisation : Algérie Informations professionnelles : Activité : Étudiant Secteur : Communication - Médias Informations forums : Inscription : juillet 2011 Messages : 5 Points : 1 Points : 1	@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à tu pense que le probleme vient de là ? ( faut remplacer <iframe> par <object> ? ... classe le code maintenant merci a toi =)
	00

09/07/2011, 01h38	#10
mouloudia007 Invité de passage Étudiant Inscription : juillet 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Localisation : Algérie Informations professionnelles : Activité : Étudiant Secteur : Communication - Médias Informations forums : Inscription : juillet 2011 Messages : 5 Points : 1 Points : 1	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email