.
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 :
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 (format utilisé généralement par les hébergeurs 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
) la source de la vidéo. Ces deux attributs devront donc avoir la même valeur.
Remarque : j'ai simplifié les balises
en une balise seule
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 :
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 :
Observez maintenant la balise embed du code « sale ». En XHTML, elle n'existe pas, n'est donc pas 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 avez donc tout transplanté !
Seulement, il y a un hic. IE (6 et inférieurs) va encore une fois nous embêter. Lui n'arrive pas à lire le magnifique code que nous venons de réaliser. On va alors devoir ruser et laisser la balise embed, qu'il arrive bien à exécuter, dans une instruction conditionnelle, qui ne s'exécutera que pour lui. Et comme elle est déguisée en commentaire, notre code sera toujours valide ! On doit procéder de la manière suivante :
On récapitule ! Notre code final sera donc :
Ouf ! Enfin fini.
Nous pouvons passer à la suite.
Pour plus d'infos sur les instructions conditionnelles, vous pouvez regarder ici.
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 :
Les deux lignes après la balise de fin 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 généralement 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 » :
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 :
Voilà qui est fait.
Ensuite, il suffit de transplanter toutes les balises
du code « sale » dans notre code « propre » (en les transformant en balises seules à l'occasion).
Dans ce cas-ci, il y en a deux :
Voilà.
Il ne reste plus que la balise