Insérer une vidéo

**Metcall** · 26/02/2009, 19h44

Je souhaite insérer une vidéo stockée sur Vimeo; Comme je ne maîtrise pas du tout le code, pourriez-vous m'indiquer comment m'y prendre?

Voici le code source de ma page html:

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">   
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>SP'Hinx</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="fond">
 
 
</body>
</html>

Le code de mon style.css

Code :

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

1
2
3
4
5
6
7
8
9
body{
	 margin:0; padding:0; }
#fond { 
background-image:url(theme/fond.jpg);
background-repeat:no-repeat;
height:1600px; width:1200px 
margin:0 auto;
padding:0;
	}

Je voudrais que ma vidéo occupe une certaine place dans ma page, en fait au centre au niveau de la hauteur et au niveau de la largeur.

merci beaucoup pour votre aide.

**Metcall** · 26/02/2009, 21h38

En utilisant la commande center, j'arrive à centrer ma vidéo au niveau horizontal mais pas vertical.

Le code html:

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">   
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>SP'Hinx</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="fond">
 
<div align="center">
  <style="position: absolute; top: 200px; left: 200px; width: 200px; height: 200px; > 
 
  <object width="600" height="400"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3379560&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=3379560&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="600" height="400"></embed></object><br />
 
 
</body>
</html>

Je sais qu'il est possible de le faire avec css, mais je ne sais pas comment insérer la vidéo dans la feuille de style.

Merci d'avance pour vos réponses avisées.

**Ethyde** · 26/02/2009, 22h43

Envoyé par Metcall

En utilisant la commande center, j'arrive à centrer ma vidéo au niveau horizontal mais pas vertical.

Le code html:

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">   
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>SP'Hinx</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="fond">
 
<div align="center">
  <style="position: absolute; top: 200px; left: 200px; width: 200px; height: 200px; > 
 
  <object width="600" height="400"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3379560&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=3379560&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="600" height="400"></embed></object><br />
 
 
</body>
</html>

Je sais qu'il est possible de le faire avec css, mais je ne sais pas comment insérer la vidéo dans la feuille de style.

Merci d'avance pour vos réponses avisées.

Oula oula oula doucement tu mélange un peu tout là

Alors non css ne peut pas appeler une video (encore que j'avoue ne jamais avoir essayé mais bon ^^)

Déjà ton code html est faux :

- la balise <style> tel que tu l'utilise n'existe pas, elle sert dans avant le </head> pour appeler des style css je te conseil pour en savoir plus d'aller lire Premiers pas avec les CSS en particulier le paragraphe IIB

- tes deux <div> ne sont pas fermées

- Pourquoi mettre du css directement dans la page html alors que dans l'en tête de la page tu appeler un fichier css externe ?

- Pourquoi spécifié une hauteur et largeur de 200px a ta <div> alors que ta video fait 600*400 ?

- Pourquoi rajouter une <div> dans ta <div id="fond"> ?

je te remet une version corrigée :

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">   
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>SP'Hinx</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="fond">
 
  <object width="600" height="400"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3379560&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=3379560&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="600" height="400"></embed></object><br />
 
</div>
</body>
</html>

Voila pour commencer

**Metcall** · 27/02/2009, 10h57

Merci pour ces précisions. Comme tu l'auras compris, je ne connais absolument rien au html et css

.

Je veux juste faire cette page avec ce fond et cette vidéo centrée. J'ai conscience que le format du fond est volumineux, mais je n'aipas trouvé d'autres solutions pour éviter soit une répétition du fond (ce qui serait moche avec le logo), soit une bande blanche (topic précédent).

J'ai apporté les modifs que tu indiquais. Mais cela ne centre pas ma vidéo en hauteur et en largeur. As-tu une solution?

Cordialement,

Laurent

**Ethyde** · 27/02/2009, 12h24

En modifiant ta feuille de style ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
body {
		background:#000;
	}
	#fond {
		background-image:url(theme/fond.jpg);
		background-position:top left;
		background-repeat:no-repeat;
		background-color:#000;
		text-align :center;
		padding-top:200px;
	}

et ton html ainsi :

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">   
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>SP'Hinx</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="fond">
 
  <object width="600" height="400"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3379560&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=3379560&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="600" height="400"></embed></object><br />
 
</div>
</body>
</html>

tu devrait avoir un rendu qui correspond plus à tes attentes.

Insérer une vidéo

CSS

Vue hybride

Discussions similaires

Partager

Partager