Comment rendre une vidéo YouTube ou DailyMotion valide en XHTML

Par 1loup, jeudi 19 octobre 2006 à 03:56 :: General :: #810 :: rss

Je viens de voir que les codes fournis par YouTube et DailyMotion ont changés mais ils ne sont toujours pas valides XHTML !
Ils n'ont toujours pas compris que <embed> était INTERDIT en XHTML
Mais ce n'est pas grave, on va le rendre valide tout cela...

Le squelette (modèle), le voici :


<object width="largeur" height="hauteur" type="application/x-shockwave-flash" data="URL">
<param name="movie" value="URL" />
<param name="wmode" value="transparent" />
...
<param name="nom" value="valeur" />
...
<p>Texte de remplacement devant apparaitre si flash désactivé ou plugin absent (penser aussi aux aveugles et au référencement par Google/Yahoo...)</p>
</object>

Vous pouvez l'utiliser dans votre code directement si vous l'intégrez entre des <p>...</p>. Personnellement, je préfère centrer les vidéos, j'inscrit donc ce code dans un <div style="text-align: center;">...</div>. Si vous êtes en Wiki sous DotClear, utilisez ///html devant et /// après le code.

Un exemple sur une vidéo YouTube (choppé sur le blog d'Arkane), le code fourni est :


<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/YO9JDgU3EUs">
</param>
<param name="wmode" value="transparent">
</param>
<embed src="http://www.youtube.com/v/YO9JDgU3EUs" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350">
</embed>
</object>

Je le transforme ainsi :


<div style="text-align: center;">
<object width="425" height="350" type="application/x-shockwave-flash" data="http://www.youtube.com/v/YO9JDgU3EUs">
<param name="movie" value="http://www.youtube.com/v/YO9JDgU3EUs" />
<param name="wmode" value="transparent" />
<p>Clip La ceinture d'Elodie FREGE (en flash)</p>
</object>
</div>

pour obtenir ceci :

J'ai été prendre un exemple au hasard sur DailyMotion, c'est exactement pareil (ou presque) :


<div>
<object width="425" height="335">
<param name="movie" value="http://www.dailymotion.com/swf/1a1Hb25UtqnjK3usd">
</param><param name="allowfullscreen" value="true">
</param>
<embed src="http://www.dailymotion.com/swf/1a1Hb25UtqnjK3usd" type="application/x-shockwave-flash" width="425" height="334" allowfullscreen="true">
</embed>
</object>
<br /><b>
<a href="http://www.dailymotion.com/video/xhu0l_a-chaque-seconde">à chaque seconde</a>
</b><br />
<i>envoy&eacute; par <a href="http://www.dailymotion.com/morphologique">morphologique</a></i>
</div>

devient avec moi :


<div style="text-align: center;">
<object width="425" height="335" type="application/x-shockwave-flash" data="http://www.dailymotion.com/swf/1a1Hb25UtqnjK3usd">
<param name="movie" value="http://www.dailymotion.com/swf/1a1Hb25UtqnjK3usd" />
<param name="wmode" value="transparent" />
<p>Vidéo A chaque seconde de Sinclair (en flash)</p>
</object>
<p><b><a href="http://www.dailymotion.com/video/xhu0l_a-chaque-seconde">à chaque seconde</a></b><br />
<i>envoy&eacute; par <a href="http://www.dailymotion.com/morphologique">morphologique</a></i></p>
</div>

pour obtenir ceci :

à chaque seconde
envoyé par morphologique

Faite surtout très attention de bien répéter l'URL aux deux endroits nécessaires, l'un sert à Firefox, l'autre à Internet Explorer. Pour les tailles, par contre, en grand maniaque, je n'utilise jamais les nombres donnés par DailyMotion ou YouTube, qui sont standardisés, je préfère rechercher les tailles des vidéos d'origines, il y a ainsi beaucoup moins d'effets de mozaïques.

Une question ? N'hésitez pas !

C'était difficile ? Non ! Et voilà

Tag(s) : DotClear - , Google - , Video -

Qui qui vient m'aider à choisir un DVD ? Je rêve en couleurs

Trackbacks

1. Le mercredi 7 février 2007 à 06:47, de Cybercarnet de Guillaume Goyette

Codito ergo sum (je code donc je suis)

Codito ergo sum (je code donc je suis), j'adore ce jeux de mot qui fait bien évidemment allusion au célèbre Cogito ergo sum Notez que j'ai vérifié et codito n'est pas un vrai mot en latin [..] Merci à 1loup pour son truc pour rendre valide le

Pour faire un trackback sur ce billet, changez tb.php par tada.php dans ceci :
http://1loup.net/tb.php?id=810

Commentaires

1. Le jeudi 19 octobre 2006 à 18:57, par kitt67

Mince, ej comprends pkoi chez moi c'est pas valide en xhtml, j'utilise embed lol

2. Le vendredi 20 octobre 2006 à 07:56, par edonis

concrêtement celà ne change rien au niveau affichage contrairement à certaine balise qui foudroie un design. Là c'est juste que la balise embed n'est plus reconnu par le w3c

ceci étant mieux vaut s'y habituer maintenant et de prendre le bon pli

3. Le vendredi 20 octobre 2006 à 08:37, par SLB

Ouhla ca c'est un commentaire pour moi si je ne m'abuse.... Je me fait rare pour cause d'emploi du temps beaucoup trop sruchargé (oui oui trop SUR chargé!) mais I'll be back

4. Le samedi 21 octobre 2006 à 00:45, par Xarro

Et donc, c'est... genre, bien ? Que ce soit valide ?

5. Le samedi 21 octobre 2006 à 01:09, par 1loup

>SLB : Pas que pour toi, pour Arkane aussi

>Xarro : Ce qui est bien, c'est d'être valide au DOCTYPE que l'on déclare. C'est toi qui le choisit, ton Doctype !
C'est un peu comme si avant de parler, tu disais "je parle français" puis qu'en fait tu parles pas français. Ben forcément ceux qui ne comprennent que le français ont du mal à te suivre et interpretent ce que tu dis comme ils peuvent. Mais s'il ne te comprennent pas, c'est de ta faute, pas de la leur.

6. Le vendredi 27 octobre 2006 à 15:59, par kognus

Pourrais-tu nous faire une petite conversion pour un autre code qui n'est pas compatible xhtml. C'est les diaporamas de slide.com. Ils sont très chouettes.

Pour le slide "moinillon.slide.com/p/5/s... par exemple, ils donnent (sans les "pubs") le code :
<div><embed src="widget-2b.slide.com/widge... type="application/x-shockwave-flash" quality="high" scale="noscale" salign="l" wmode="transparent" flashvars="site=widget-2b.slide.com&channel=360287970189744427&cy=bl&il=1" width="700" height="220" name="flashticker" align="middle"></embed></div>

avec embed...
mais cela ne fonctionne pas sur Dotclear 2 (de blog.gandi.net par exemple).
Merci d'avance pour tes lumières !

7. Le vendredi 27 octobre 2006 à 17:22, par 1loup

>Kognus : J'ai rendu valide le code chez moi. Le player s'affiche mais au lieu d'obtenir les images qui constituent l'animation, j'ai un scrolling du message "The Slide Show code seems goofed up. Please embed the code again." ! Non seulement ils ne sont pas capables de fournir un code valide XHTML mais en plus, ils ne veulent pas que l'on touche au code qu'ils fournissent puisqu'ils le vérifient et bloquent le rendu. Je te laisse conclure par toi même.

8. Le vendredi 27 octobre 2006 à 19:00, par kognus

GRAND MERCI ! Ce qui est bête, c'est que cela marche sur d'autres plateformes de blogs (blogger, par exemple).
Je ne voudrais pas t'exploiter outre mesure, mais j'ai encore un exercice de style à te proposer avec slideshare, qui permet aussi des choses épatantes.
Pour le diaporama slideshare.net/phila/phar...
ils proposent le code :

<object type="application/x-shockwave-flash" data="s3.amazonaws.com:443/slid... width="425" height="348"><param name="movie" value="s3.amazonaws.com:443/slid... /></object>

qui ne marche pas non plus sur dotclear2 (mais amarche avec blogger )
Merci pour ta réactivité !

9. Le vendredi 27 octobre 2006 à 19:25, par 1loup

Je te propose ceci (pense juste à remplacer ce que j'ai mis entre <p> et </p> par la description que tu souhaites mettre) :
<div style="text-align: center;">
<object type="application/x-shockwave-flash" data="https://s3.amazonaws.com:443/slideshare/ssplayer.swf?id=7395&amp;doc=pharan-2006-25679" width="425" height="348">
<param name="movie" value="https://s3.amazonaws.com:443/slideshare/ssplayer.swf?id=7395&amp;doc=pharan-2006-25679" />
<param name="wmode" value="transparent" />
<param name="width" value="425" />
<param name="height" value="348" />
<p>Texte de remplacement devant apparaitre si flash désactivé ou plugin absent (penser aussi aux aveugles et au référencement par Google/Yahoo...)</p>
</object>
</div>
Si tu en as d'autres, je préfère que tu passes par mon mail, voir la page de contact ici afin de ne pas trop surcharger ce billet.

Et le problème ne vient pas de DotClear 2 mais du code fourni ! DotClear 2 est conforme XHTML ! Si le code fourni fonctionne chez Blogger, il n'est pas valide XHTML pour autant, hein...

10. Le vendredi 27 octobre 2006 à 20:45, par kognus

1 000 MERCI !
Un forum doit bientôt ouvrir sur blog.gandi.net (là où se trouve maintenant le créateur de dotclear), et, si tu es d'accord, j'y mettrai tes conseils (avec source, bien sûr).

11. Le samedi 28 octobre 2006 à 07:46, par 1loup

Oh là... c'est très gentil mais je trouverais cela un peu présomptueux de ma part de te laisser faire cela. Tu sais, je fais comme tout le monde, j'écume les forums DotClear et les spécialisés en XHTML, je lis ce qui se dit, j'essaie de comprendre et je tente de retranscrire cela sur mon blog mais c'est tout. Je n'ai pas de leçons à donner à personne hein ! Pis, visiblement mes explications ne sont pas encore nickels parce que tu n'as pas réussi à te débrouiller tout seul avec le modèle, donc calmos

12. Le samedi 28 octobre 2006 à 10:39, par kognus

Tes explications sont parfaites et je renouvelle mes 1 000 merci !
Le résultat est ici : www.philavoya.net/post/2006/10/28/diaporama-Paharan-2006
Les autres posts d'essai montrent (comme celui-là : www.philavoya.net/post/20... que les codes fournis ne marchaient pas, alors que maintenant cela marche.
Je n'ai par contre pas bien compris ton allusion aux aveugles (penser aussi aux aveugles et au référencement par Google/Yahoo...)...

Merci aussi pour ta modestie.
En fait, cela pourrait rendre bien service à d'autres blogueurs-blogueuses qui s'arrachent un peu les cheveux après avoir dû passer sur dotclear2 (la société "tooblog" ? qui était sur dotclear1 ? a fermé et a proposé à ses blogueurs de passer chez "blog.gandi" qui est sur dotclear2 : ce qui n'a pas été évident pour tout le monde). Et, pour l'instant, les conseils des usagers étaient éparpillés dans les commentaires du blog de Gandi : lebardegandi.net.
Le forum à venir pourra sans doute dépanner pas mal de gens.
Mais, bon, je respecte ta modestie.

13. Le samedi 28 octobre 2006 à 19:09, par 1loup

Et bien donne l'url du forum quand il sera ouvert, j'irai faire un tour de temps à autre pour voir si je peux aider.

Les aveugles ont en général un logiciel qui lit le code. Une animation flash devient pour eux invisible, il faut donc leur en faire une description. C'est pareil pour les images, il faut remplir le alt="". Et les robots sont eux aussi aveugles, comment veux-tu qu'un robot interprete une image ou une vidéo ? Si tu veux être référencé par eux pour tes images, tes vidéos, tes animations flash, il faut en faire une petite description.

14. Le lundi 30 octobre 2006 à 21:38, par kognus

#6-7
en tout cas ils sont cools chez slide.com. J'ai protesté et ils me répondent ceci :
You are correct, currently the sample code for our Slide Shows is not XHTML compliant mainly because most community sites don't support it.
However, I've added your suggestion to our feature list to make
additional code that will work on sites built with XHTML.

Sympa quand même !

15. Le mardi 31 octobre 2006 à 06:02, par 1loup

En gros, moi, je comprends plutôt "j'avance pas tant que les autres n'avancent pas", c'est cela non ? A ce rythme là, et si on retournais dans les cavernes ?
"Most community sites" selon les statistiques de quelle études ? Ils se foutent pas un peu de la gueule du monde, là ?
Puis comme c'est un robot qui doit leur créer leur code automatiquement, c'est quoi la difficulté de fournir à la fois un code XHTML et leur bouse immonde actuelle ?
Tu n'as pas osé leur demandé en quelle année le XHTML a été créé, histoire de rigoler ? (Janvier 2000, non ? Rien que 6 ans de retard, cela va...)
Et tu sais ce que cela veux dire lorsqu'on te réponds que l'on met quelque chose sur une "todolist" ? Tant que cela ne devient pas une priorité, il faut plutot compter sur une réactivité de l'ordre de l'année plus qu'autre chose (oui, je suis très pessimiste sur ce point là)

16. Le lundi 6 novembre 2006 à 20:59, par HoroX

Merci à Kitt de m'avoir aiguiller sur ton blog pour pouvoir mettre les video sous Wordpress!

17. Le samedi 6 janvier 2007 à 13:48, par oli91via

J'ai rien compris !!!

18. Le samedi 13 janvier 2007 à 23:34, par eustazio

Grands merci, je viens d'utiliser ton code avec succès. Le leur etait tellement moisi que wordpress le reconnaissait pas (oui wordpress, mais je te dirai c'est un sicrette :D )

19. Le jeudi 22 février 2007 à 13:00, par Jean-Sien

Merci !

20. Le vendredi 8 juin 2007 à 18:22, par Sitenreveuxyenrena

Génial!!! Merci beaucoup...

21. Le vendredi 15 juin 2007 à 10:45, par mangepa

Salut, Chez moi ca ne marche pas, j'ai un écran noir...
Pourtant j'ai suivis à la lettre les consignes, copier le code et modifier l'url

22. Le vendredi 15 juin 2007 à 22:40, par 1loup

Je ne peux pas t'aider si tu ne me donnes rien de plus !

Il me faut :

- l'url de ton blog
- la plateforme que tu utilises ou le moteur (DotClear, WordPress, quelle version ?)
- l'url du billet, publié et accessible, qui affiche un écran noir, afin que je regarde le code source (non pas le code que tu as mis toi mais ce qui est "réellement" publié, on a parfois des surprises, surtout avec WordPress)

23. Le jeudi 12 juillet 2007 à 15:17, par TiB

Merci bien, très pratique, d'autant que ton code était dans la première page de google dotclear+vidéo+youtube

+++

24. Le jeudi 12 juillet 2007 à 18:36, par 1loup

En tapant juste "youtube xhtml" ou "dailymotion xhtml", je dois être premier, il me semble

25. Le mardi 21 août 2007 à 23:21, par billboc

zut, avec www.youtube.com/watch?v=-... ca n'a pas l'air de marcher...
et chez vous ?

Merci !

26. Le mardi 21 août 2007 à 23:27, par 1loup

>billboc : L'URL qu'il faut utiliser dans le code que j'indique, ce n'est pas l'URL de la page mais celle qui se trouve à l'intérieur du Embed (la ligne en dessous) !

27. Le mercredi 22 août 2007 à 23:37, par billboc

ousp !!!
Merci
et... bravo pour ton site

28. Le mardi 16 octobre 2007 à 23:24, par Forest

ton appel a été entendu... Il se trouve que ce code valide se trouve à présent directement sur la version française de youtube :)))

29. Le dimanche 11 novembre 2007 à 20:33, par kiko

le seul problème pour Dailymotion avec ce code c 'est qu on perd la fonction zoom
pas encore trouvé de soluce

30. Le lundi 26 novembre 2007 à 21:27, par Zephir

Ah ça c'est très bien

J'ai une petite question néanmoins. Je mets en ligne des vidéos en avi "brut" et dans l'embed fourni par stage6 il y a un pluginspage="labs.divx.com/Player"...

Si je veux que ça propose à mes visiteurs non équipés du codec d'aller le prendre, je dois retranscrire le pluginspace dans param comme ça ?

<param name="pluginspace" value="labs.divx.com/Player"... />

AH oui, autre chose.
N'y a-t-il pas un moyen simpe d'intégrer le code à trou dans dc2 ?
par exemple en bas de la page d'édition de post (genre en dessous des notes ou dans les notes)
ou via un bouton de ouvrirait une popup ?

J'aimerai bien faire ça mais je sais pas quelle page éditer...

31. Le lundi 26 novembre 2007 à 22:50, par Zephir

Remoi : j'avais pas vu ton post spécial stage6 !

Mais pour la seconde question je suis toujours preneur

32. Le lundi 26 novembre 2007 à 23:43, par 1loup

>Zephir : la dernière SVN de DotClear 2 intègre les vidéos DailyMotion, YouTube et Google Vidéo directement par un formulaire ( voir 1loup.net/index.php/2007/... ) mais pas les "Stage6".

33. Le mardi 27 novembre 2007 à 17:57, par Zephir

ça a l'air bien intéressent, je savais pas que la team nous donnait accès aux SVN.

Mais je vais continuer à chercher à savoir comment faire pour éditer le post.php, voui j'aime bien me prendre la tête :s

34. Le mercredi 28 novembre 2007 à 03:04, par 1loup

>Zephyr : Et si tu allais voir le plugin Wiki+ pour DotClear 2 ?
www.guerriat.be/#wikiplus

35. Le mercredi 19 décembre 2007 à 08:06, par tyrun

Salut et merci des astuce (pff quelle galere, je t'jure)

Pour GOOGLE video, j'ai ete embeté pour une validation XHTML et lecture dans IE6 (je sais, je sais c'est vieux...)

Code original de google video:

<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="video.google.com/googlepl... flashvars=""> </embed>

Apres corrections et qui fonctionne (chez moi) sur FF et IE6:

<object type="application/x-shockwave-flash"
data="video.google.com/googlepl...
width="550" height="440">
<param name="movie" value="video.google.com/googlepl... />
<param name="wmode" value="transparent" />
</object>

----------------------------------------

Hormis les grandes lignes de presentation du code, il à fallut que je corrige la fin de l'adresse, apres : docId=5802919258211657447 :

de " &hl=fr "
changer en " &hl=en "

Si ça peut vous servir
Merci encore de votre aide, salut

36. Le mercredi 19 décembre 2007 à 21:29, par 1loup

Transformer le "&" en "&", c'est la base mais sinon, remplacer hl=fr par hl=en, j'en ai vaguement entendu parlé (mais comme les vidéos Google, c'est assez peu utilisé ). Tu précises IE6 mais avec IE7, c'est pareil ! Et dire qu'avec le très vieux Firefox 1.0 cela fonctionne correctement...

37. Le vendredi 1 février 2008 à 10:35, par sbertolotti

Bonjour,

Un grand merci pour toutes ces astuces clairement expliquées.

Stéphane

Les commentaires de ce billet peuvent être suivis sur ce fil RSS

Ajouter un commentaire

Nom / Pseudonyme :

Email (Non publié) :

Site Web / Blog (Publié) :

Calculette Captcha anti-spam : dans le nombre "3452178", quel chiffre vient après un ?

Commentaire :

Le code HTML dans le commentaire sera affiché comme du texte, les adresses internet seront converties automatiquement.

Informations supplémentaires :

Ici, c'est chez moi, compris ?
Je ne fais pas de prémodération, le captcha devrait éliminer les spammeurs.
Mais je dis non au langage SMS.
Essayez d'être compréhensible. Je préfère des fautes de frappes, de grammaires, d'orthographes à "KiC Kifè KK".
Pour le reste, ensuite, je fais ce que je veux avec VOS commentaires. Je peux très bien les modifier (je mettrais "Edit") ou les censurer si je l'estime nécessaire.

(Adresse IP enregistrée même derrière un proxy !)

Se souvenir de mes informations

Recevoir une notification de réponse aux commentaires par email