Comment positionner vidéo flash dans page html à un endroit précis [Résolu]

cutpeter56 · 15/12/2010, 18h17

bonjour à tous,

je suis en refonte de mon site web...
Pour ma page d'accueil : http://www.baudlocminehb.info/indexV2.0

J'ai donc mon background avec l'image de la salle et grâce à mon div, j'ai rajouté une image PNG par dessus nommée sélection (choix entre facebook, le site).

Il me reste 1 grand rectangle vide, dans lequel j'aimerais intégré des vidéos flash (elles sont mise en ligne sur dailymotion par notre fédération et sont plutôt sympa...)

Alors comment cela est il possible ? afin que la vidéo se place bien dans ce rectangle.
Merci de votre aide.

cutpeter56 · 16/12/2010, 09h47

J'ai trouvé 1 partie de ma réponse.
Grâce à 1 autre div (#video) et en mettant des padding top et left...

Cependant, l'affichage s'adapte à l'écran et si je viens a réduire ma fenêtre, l'a vidéo change de place...
Comment faire pour ça reste fixe et surtout adapté à tous les écrans.

Ci dessous mon code :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
html{
    height: 100%;
}
 
 
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(images/bg1px.jpg); 
	background-position: left;
    background-repeat: repeat-x;
    background-color: #a1a1a1;
    background-position: top;
}
 
a{
 border: 1px;   
}
 
img{
border: 1px;   
}
 
#bgBordure{
background-image: url(images/bg.png); 
width: 100%;
padding-top: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
text-align: center;
position: relative;
}
 
#video{
padding-top: 33px;
padding-left: 281px;
background-repeat: no-repeat;
position: absolute;
color: #F00;
}
 
</style>
</head>
 
<body>            
<div id="bgBordure">
<div id="video">
<object width="480" height="270"><param name="movie" value="http://www.dailymotion.com/swf/video/xexuqb_clip-ffhb-le-hand-pour-tous_sport?additionalInfos=0"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/xexuqb_clip-ffhb-le-hand-pour-tous_sport?additionalInfos=0" width="480" height="270" allowfullscreen="true" allowscriptaccess="always">
</embed></object>
 
</div>
<img src="images/selection.png" border="0" usemap="#prehomeMap" alt="" />
<map name="prehomeMap"><area shape="rect" coords="507,1,726,224" href="http://www.baudlocminehb.info/v2.0/">
<area shape="rect" coords="508,228,729,327" href="http://www.facebook.com/#!/group.php?gid=14936989293">
</map>
</div>   
</div>
</body>
</html>

insane1 · 22/12/2010, 16h25

Bonjour,
Essai ce code :

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
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Baud Locmine HB - site officiel</title>
<meta name="description" content="Baud Locmine HB - Le site officiel">
<meta name="keywords" content="BLHB Baud Locmine HB site officiel">
<style type="text/css">
 
html{
    height: 100%;
}
 
 
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(http://www.baudlocminehb.info/images/bg1px.jpg); 
	background-position: left;
    background-repeat: repeat-x;
    background-color: #a1a1a1;
    background-position: top;
}
 
a{
 border: 1px;   
}
 
img{
border: 1px;   
}
 
#bgBordure{
background-image: url(http://www.baudlocminehb.info/images/bg.png); 
width: 100%;
background-repeat: no-repeat;
background-position: top center;
float: left;
text-align: center;
position: relative;
 
}
 
#video{
background: url(http://www.baudlocminehb.info/images/selection.png) no-repeat;
position: relative;
width:800px;
margin-top:200px;
margin-left:auto;
margin-right:auto;
height:800px;
z-index:5;
color: #F00;
}
 
#objetvid {
position:relative;
top:30px;
left:-150px;
}
 
</style>
</head>
 
<body>            
<div id="bgBordure">
<div id="video">
<div id="objetvid">
<object width="480" height="270"><param name="movie" value="http://www.dailymotion.com/swf/video/xexuqb_clip-ffhb-le-hand-pour-tous_sport?additionalInfos=0"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/xexuqb_clip-ffhb-le-hand-pour-tous_sport?additionalInfos=0" width="480" height="270" allowfullscreen="true" allowscriptaccess="always">
</embed></object></div>
 
 
</div>
<!--<img src="http://www.baudlocminehb.info/images/selection.png" border="0" usemap="#prehomeMap" alt="" />-->
<map name="prehomeMap"><area shape="rect" coords="507,1,726,224" href="http://www.baudlocminehb.info/v2.0/">
<area shape="rect" coords="508,228,729,327" href="http://www.facebook.com/#!/group.php?gid=14936989293">
</map>
</div>   
</div>
</body>
</html>

J'ai du changer des chemins pour que cela fonctionne en local.

cutpeter56 · 26/12/2010, 16h29

Merci beaucoup de votre aide.
Je n'ai pu répondre que maintenant car j'étais en congés

.

Effectivement, c'est parfait car la vidéo reste calée dans ce fameux cadre noir donc merci.
Cependant, je ne retrouve pas mes zones de clics sur les 2 carrés (V2.0 et facebook) alors que les coordonnées sont bonnes.

Je ne vois pas....
Merci de votre aide
et joyeuses fêtes
Pierre

insane1 · 28/12/2010, 11h37

L'image est maintenant en background donc plus possible de mettre une map dessus.
Une solution serait de découper les boutons de la grande image pour en obtenir 3 différentes et ainsi pouvoir se passer des maps.

insane1 · 28/12/2010, 12h06

J'ai fais autrement cela dit si ca t'interesse (c'est bien parce que j'aime beaucoup le handball

)

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
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Baud Locmine HB - site officiel</title>
<meta name="description" content="Baud Locmine HB - Le site officiel">
<meta name="keywords" content="BLHB Baud Locmine HB site officiel">
<style type="text/css">
 
html{
    height: 100%;
}
 
 
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(http://www.baudlocminehb.info/images/bg1px.jpg); 
	background-position: left;
    background-repeat: repeat-x;
    background-color: #a1a1a1;
    background-position: top;
}
 
a{
 border: 1px;   
}
 
img{
border: 1px;   
}
 
#bgBordure{
background-image: url(http://www.baudlocminehb.info/images/bg.png); 
width: 100%;
background-repeat: no-repeat;
background-position: top center;
float: left;
text-align: center;
position: relative;
 
}
 
#video{
background: url(http://www.baudlocminehb.info/images/selection.png) no-repeat;
position: relative;
width:800px;
margin-top:200px;
margin-left:auto;
margin-right:auto;
height:800px;
z-index:5;
color: #F00;
}
 
#objetvid {
position:relative;
top:30px;
width:500px;
}
 
#facebook {
position: relative;
top: -50px;
left:500px;
z-index:100;
width:220px;
height:110px;
}
 
#v2 {
position: relative;
width:220px;
top:-380px;
left:500px;
height: 220px;
} 
 
#facebook:hover {
cursor: pointer;
}
 
#v2:hover {
cursor: pointer;
}
</style>
</head>
 
<body>            
<div id="bgBordure">
<div id="video">
<div id="objetvid">
<object width="480" height="270"><param name="movie" value="http://www.dailymotion.com/swf/video/xexuqb_clip-ffhb-le-hand-pour-tous_sport?additionalInfos=0"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/xexuqb_clip-ffhb-le-hand-pour-tous_sport?additionalInfos=0" width="480" height="270" allowfullscreen="true" allowscriptaccess="always">
</embed></object></div>
<div id="facebook" onclick="window.location.href='http://www.facebook.com/#!/group.php?gid=14936989293'">&nbsp;</div>
<div id="v2" onclick="window.location.href='http://www.baudlocminehb.info/v2.0/'">&nbsp;</div>
 
 
</div>
</div>   
</div>
</body>
</html>

Ca devrait bien marcher avec ce code

cutpeter56 · 28/12/2010, 16h39

Un grand MERCI mec !
J'étais en train de le faire lorsque tu as posté...

C'est parfait encore merci ! il n'y a plus qu'a développer le Joomla qui sera derrière :-D
Vive le Handball, sport au combien snobé par nos médias malgré que la France soit la meilleure nation de tous les temps

Sujet Résolu

15/12/2010, 18h17	#1
cutpeter56 Invité de passage Inscription : février 2007 Messages : 62 Détails du profil Informations forums : Inscription : février 2007 Messages : 62 Points : 4 Points : 4	Comment positionner vidéo flash dans page html à un endroit précis bonjour à tous, je suis en refonte de mon site web... Pour ma page d'accueil : http://www.baudlocminehb.info/indexV2.0 J'ai donc mon background avec l'image de la salle et grâce à mon div, j'ai rajouté une image PNG par dessus nommée sélection (choix entre facebook, le site). Il me reste 1 grand rectangle vide, dans lequel j'aimerais intégré des vidéos flash (elles sont mise en ligne sur dailymotion par notre fédération et sont plutôt sympa...) Alors comment cela est il possible ? afin que la vidéo se place bien dans ce rectangle. Merci de votre aide.
	00

26/12/2010, 16h29	#4
cutpeter56 Invité de passage Inscription : février 2007 Messages : 62 Détails du profil Informations forums : Inscription : février 2007 Messages : 62 Points : 4 Points : 4	Merci beaucoup de votre aide. Je n'ai pu répondre que maintenant car j'étais en congés . Effectivement, c'est parfait car la vidéo reste calée dans ce fameux cadre noir donc merci. Cependant, je ne retrouve pas mes zones de clics sur les 2 carrés (V2.0 et facebook) alors que les coordonnées sont bonnes. Je ne vois pas.... Merci de votre aide et joyeuses fêtes Pierre
	00

28/12/2010, 11h37	#5
insane1 Membre confirmé Inscription : février 2009 Messages : 317 Détails du profil Informations forums : Inscription : février 2009 Messages : 317 Points : 209 Points : 209	L'image est maintenant en background donc plus possible de mettre une map dessus. Une solution serait de découper les boutons de la grande image pour en obtenir 3 différentes et ainsi pouvoir se passer des maps.
	00

28/12/2010, 16h39	#7
cutpeter56 Invité de passage Inscription : février 2007 Messages : 62 Détails du profil Informations forums : Inscription : février 2007 Messages : 62 Points : 4 Points : 4	Un grand MERCI mec ! J'étais en train de le faire lorsque tu as posté... C'est parfait encore merci ! il n'y a plus qu'a développer le Joomla qui sera derrière :-D Vive le Handball, sport au combien snobé par nos médias malgré que la France soit la meilleure nation de tous les temps Sujet Résolu
	00

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