Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
La première chose à faire est, bien sûr, de récupérer un de ces fameux codes automatiques.
Comme le code varie d'un site à l'autre, je vais en prendre 2 différents (un de YouTube et un de Dailymotion) pour l'exemple.
Sur YouTube
Sur YouTube, le code est situé à droite de la vidéo.
Prenons pour l'exemple
cette page.
Le code est situé à droite de la vidéo, sous le profil de l'expéditeur de la vidéo (immanquable).
Copiez ce code dans votre page web (vous en aurez besoin pour la suite).
Sur Dailymotion
Sur Dailymotion, le code est situé un petit peu plus bas.
Comme exemple, prenons
cette page.
Sous la vidéo, il y a des options telles
ajouter aux favoris. Descendez encore, et vous verrez deux lignes. La deuxième s'appelle
lecteur exportable. C'est cela qu'on veut.
Copiez ce code dans votre page web, une fois encore.
Non, ne partez pas tous en courant !
Vous allez voir, malgré les apparences, c'est très simple !
Depuis un code YouTube
Prenons le code minimal valide d'une page web, et mettons-y uniquement la vidéo (pour faire simple).
Cela nous donne donc ceci :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <!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" >
<head>
<title>Ma vidéo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div> <object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/_etwz7NkemE&hl=fr"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/_etwz7NkemE&hl=fr" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object> </div>
</body>
</html>
|
:
object est une balise de type
inline, c'est pourquoi il faut la mettre dans une balise de type
block, comme
<div>.
Comme promis, nous allons transplanter les données dans un code propre !
Un code propre ? C'est quoi, ça ?
On pourrait dire aussi un code "de base". Il s'agit en fait d'un code pour insérer une vidéo mais sans données à l'intérieur.
Voilà un code de base :
Code : HTML1
2
3 | <div> <object type="application/x-shockwave-flash" width="425" height="355" data="url">
<param name="movie" value="url" />
</object> </div>
|
Pas de panique, voyons !
L'attribut
type="application/x-shockwave-flash" est là pour informer que l'intérieur de la balise
object est une vidéo flash (qui vient d'un hébergeur de vidéo). Sans cette ligne, la vidéo ne fonctionnerait pas.
Les attributs
width et
height sont (comme vous le savez sans doute déjà) là pour informer de la largeur et de la hauteur de l'objet (en l'occurrence, la vidéo). Ici, j'ai mis les mêmes valeurs que dans le code récupéré sur YouTube.
L'attribut
data indique (tout comme l'attribut
value de la balise
<param>) la source de la vidéo. Ces deux attributs devront donc avoir la même valeur.
Remarque : j'ai simplifié les balises
<param></param> en une balise seule
<param /> car les deux fonctionnent, et que c'est plus simple comme ça.
Eh bien, qu'attendons-nous ? Allons-y.
La première chose à faire est de remplir la valeur des attributs
data et
value. Ici, j'ai marqué
url pour montrer qu'il fallait y mettre une adresse.
Copiez la valeur de l'attribut
value du code récupéré sur YouTube et copiez-la sur les deux
url.
Cela donne ça :
Code : HTML1
2
3 | <div> <object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/_etwz7NkemE&hl=fr">
<param name="movie" value="http://www.youtube.com/v/_etwz7NkemE&hl=fr" />
</object> </div>
|
Bon, on avance déjà.
Ensuite, copiez la balise
param du code "sale" ayant pour attribut
name et pour valeur
wmode. Collez-la au-dessous de la première balise
param du code "propre".
Cela nous donne ça :
Code : HTML1
2
3
4 | <div> <object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/_etwz7NkemE&hl=fr">
<param name="movie" value="http://www.youtube.com/v/_etwz7NkemE&hl=fr" />
<param name="wmode" value="transparent" />
</object> </div>
|
Observez maintenant la balise
embed du code "sale". En XHTML, elle n'existe plus, n'est donc plus valide, et cause donc des erreurs.
C'était une balise qui avait été "inventée" en HTML 4, et que le W3C a donc supprimée lors du passage au XHTML. Pour plus d'informations, rendez-vous
ici.
Mais si vous regardez bien, vous constaterez quelque chose d'intéressant. Cette balise a pour attributs
src, type, wmode, width et
height. Et si vous observez votre code "propre", vous verrez que chacune de ces informations est déjà écrite quelque part !
Vous pouvez donc
SUPPRIMER la balise
embed et tous ces attributs.
Comme vous pouvez le constater, vous avez tout transplanté !
C'est fini !… …pour cette partie !
Depuis un code Dailymotion
Bon, maintenant on recommence tout !
Enfin, ça ira beaucoup plus vite maintenant que vous connaissez les bases.
Voici le code donné sur Dailymotion :
Code : HTML1
2
3
4
5
6
7 | <div><object width="420" height="336">
<param name="movie" value="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1" type="application/x-shockwave-flash" width="420" height="336" allowFullScreen="true" allowScriptAccess="always"></embed>
</object><br /><b><a href="http://www.dailymotion.com/video/x2mxmd_les-inconnustelemagouille_fun">Les Inconnus-Télémagouille</a></b>
<br /><i>envoyé par <a href="http://www.dailymotion.com/kiavel">kiavel</a></i></div>
|
Les deux lignes après la balise de fin
</object> sont des liens vers la vidéo sur Dailymotion et vers le profil de l'expéditeur. Vous pouvez les garder ou les supprimer (pour ma part, je garde le premier mais pas le deuxième).
Cependant, je vais les supprimer ici pour nous concentrer sur le code de la vidéo.
Ici aussi, nous aurons besoin d'un code "propre" :
Code : HTML1
2
3 | <div> <object type="application/x-shockwave-flash" width="420" height="336" data="url">
<param name="movie" value="url" />
</object></div>
|
J'ai cette fois mis comme largeur et hauteur les valeurs du code récupéré sur Dailymotion.
Comme pour le code YouTube, la première chose à faire est d'indiquer la source de la vidéo dans le code de base, depuis une balise
param du code de Dailymotion :
Code : HTML1
2
3 | <div> <object type="application/x-shockwave-flash" width="420" height="336" data="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1">
<param name="movie" value="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1" />
</object> </div>
|
Voilà qui est fait.
Ensuite, il suffit de transplanter toutes les balises
<param> du code "sale" dans notre code "propre" (en les transformant en balises seules à l'occasion).
Dans ce cas-ci, il y en a deux :
Code : HTML1
2
3
4
5 | <div> <object type="application/x-shockwave-flash" width="420" height="336" data="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1">
<param name="movie" value="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
</object> </div>
|
Voilà.
Il ne reste plus que la balise
<embed> et, comme avec le code YouTube, vous pouvez la supprimer car toutes ses données sont déjà ailleurs !
Là encore, vous avez tout transplanté.
Post Scriptum : Vous pouvez mettre une balise
<param name="wmode" value="transparent" /> pour éviter certains bugs d'affichage.
Et si mon code n'est ni YouTube ni Dailymotion ?
Dans ce cas-là, prenez le code de base (toujours le même) et mettez-y les bonnes données de largeur et de hauteur.
Comparez les deux codes et transplantez les données des balises
param comme avec les deux autres codes, et tout devrait fonctionner impeccablement, essayez donc !
Vous pouvez également (ce n'est pas une obligation), mettre une balise
<param name="wmode" value="transparent" /> si elle n'existe pas, pour les mêmes raisons que pour le code Dailymotion.
PS : n'oubliez pas de supprimer la balise "embed" s'il y en a une à la fin.
Si vous allez tester votre page sur le W3C, vous verrez qu'il y a encore des erreurs.
Et pour cause : il y a, dans votre code, des
&.
C'est quoi, cette histoire ? Je dois les supprimer ?
Pas de panique.
Comme l'a si bien expliqué M@teo, on ne peut pas mettre de
& dans les liens en XHTML. Il faut simplement les remplacer par
& !
En remplaçant par
& chaque "&" contenu dans les liens, cela nous donne :
Code YouTube
Code : HTML1
2
3
4 | <div> <object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/_etwz7NkemE&hl=fr">
<param name="movie" value="http://www.youtube.com/v/_etwz7NkemE&hl=fr" />
<param name="wmode" value="transparent" />
</object> </div>
|
Code Dailymotion
Code : HTML1
2
3
4
5
6 | <div> <object type="application/x-shockwave-flash" width="420" height="336" data="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1">
<param name="movie" value="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
</object> </div>
|
Code ni l'un ni l'autre
Eh bien… je ne peux pas savoir, moi !
Remplacez simplement par
& chaque
&.
Et maintenant ?
Comment ça, "et maintenant" ?
Eh bien, maintenant, vous pouvez aller
tester votre page sur le
W3C, vous devriez avoir ceci :
Ce n'est pas le cas ?
Bon, cela veut dire que les erreurs viennent d'ailleurs, et je ne peux rien faire pour vous !
Mais bon, le W3C indique d'où viennent les erreurs, donc vous devriez pouvoir vous en sortir.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
168 Zéros connectés |
8 requêtes |
0.1281s (0.116s)
