WordPress Francophone

alakhnor · 03-04-2007 22:37:34

Je fais ceci car j'ai vu que la question revenait souvent ces temps, et vu que j'ai galéré un peu pour arriver à une solution, je vais essayer d'en faire profiter.

Tout d'abord, il y a 2 solutions qui donnent un bon résultat : 1 solution directe avec un object, et une solution nécessitant le chargement d'un petit script swfobject.js, qui est en passe de devenir un standard.

Pour ne pas risquer de faire des choses bizarres, il est fortement recommandé de désactiver l'éditeur visuel (Utilisateurs -> Profil) ou au moins, de rentrer sous forme de code (onglet 'code' de l'éditeur).

1 Le lien Youtube

L'adresse Youtube a cette allure : http://www.youtube.com/v/_QIpic5HuXo.

_QIpic5HuXo est le numéro de référence de la vidéo sur le site youtube.

2 La balise object

Youtube fournit un code avec la balise object sur la page des vidéos, mais ce code n'est pas extraordinaire. D'une part, il est compliqué (ce qui n'est pas gênant vu qu'on le copie), mais surtout, il n'est pas compatible avec les standard W3C.

Ce code est :

Code:

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

boulet

Pour faire plus simple et plus propre, on peut simplement mettre ce code :

Code:

<object data="http://youtube.com/v/_QIpic5HuXo" type="application/x-shockwave-flash" width="425" height="350"> 
  <param name="movie" value="http://youtube.com/v/_QIpic5HuXo" /> 
</object>

3 SWFObject

Il est nécessaire d'inclure auparavant le script dans son blog (et donc le télécharger). On peut le faire simplement dans l'entête (fichier header.php).

Dans le fichier header.php (si le fichier swfobject est dans le répertoire du thème :

Code:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/swfobject.js"></script>

Attention : si vous utilisez un thème ou un plugin intégrant du javascript, il est possible que ce fichier soit déjà chargé par lui, auquel cas, rien à faire^^
Par exemple, wordTube intègre déjà ce fichier.

Le code à insérer est alors :

Code:

<div id="flashcontent">Texte ou image par défaut.</div>
<script type="text/javascript">
<!--
  var so = new SWFObject("http://www.youtube.com/v/_QIpic5HuXo", "mymovie", "425", "350", "7", "#efefef"); 
  so.write("flashcontent"); //-->
</script>

4 Trucs à savoir pour Youtube

Youtube est pratique car avec l'ID d'une vidéo, on peut récupérer des tas de trucs intéressants si on veut aller plus loin :
- le lien de la page : http://www.youtube.com/watch?v=_QIpic5HuXo
- une vignette 320x240 : http://img.youtube.com/vi/_QIpic5HuXo.jpg/0.jpg
- une vignette 137x97 : http://img.youtube.com/vi/_QIpic5HuXo.jpg/2.jpg

Dernière modification par alakhnor (03-04-2007 22:53:05)

BenKenobi · 03-04-2007 23:19:58

En ce qui me concerne j'utilise le premier code "propre" que tu donnes et c'est impeccable.

Sinon merci pour ce tuto fort utile... je sens que je vais compléter mon article de la FAQ qui fait bien ridicule... blink

alakhnor · 03-04-2007 23:27:07

La seconde solution, bien que plus complexe, à l'usage, est mieux gérée (surtout par IE) et permet de passer des paramètres simplement. wink

C'est surtout vrai si on essaie avec Dailymotion qui est un vrai casse-tête.

Rod · 03-04-2007 23:38:42

Mais en Jquery, c'est encore mieux, mais tout le monde semble bouder Jquery, ici sad

alakhnor · 03-04-2007 23:50:30

Faut voir, certains plugins jquery utilisent swfobject. tongue

Rod · 03-04-2007 23:55:04

ouais sauf que dans ton code tu as

<a href="url you tube">nom du fichier</a>

sorry, j'ai du mal à comprendre qu'on considere que ce ne soit pas le top en matiere d'integration smile

mariewp · 04-04-2007 17:30:43

Il est nécessaire d'inclure auparavant le script dans son blog (et donc le télécharger)

O.k et je le trouve ou ?

alakhnor · 04-04-2007 18:52:50

http://blog.deconcept.com/swfobject/swfobject.zip

Rod · 05-04-2007 07:21:26

http://jquery.lukelutman.com/plugins/fl … utube.html

voila, meme l'editeur visuel sera content ...

yazerty · 18-05-2007 16:39:06

Je débarque un peu dans Wordpress en ce moment.

Le 2nd code donné je l'utilise déjà sous DC2 et c'est effectivement le meilleur smile . Par contre je me demanais s'il n'existait pas un super plugin qui le rajoute simplement un bouton dans l'éditeur visuel et qui permettrait d'intégrer une vidéo efficacement et proprement simplement en entrant son url et les dimensions du lecteur (largeur et hauteur) ?

bobby · 20-05-2007 17:00:20

Bonjour,

J'ai un gros problème avec les vidéos. Pour insérer une vidéo, j'utilise le code propre, cad sans la balise embed. Le problème c'est que ça me fout en l'air ma CSS et ça me génére des erreurs HTML.

Voir l'exemple

Auriez-vous une solution?

Merci d'avance.

Dernière modification par bobby (20-05-2007 17:00:53)

alakhnor · 20-05-2007 20:21:39

Je ne vois pas trop de problème lié au lecteur. C'est quoi le souci sur la page là ?

bobby · 20-05-2007 20:26:24

edit : je viens de comprendre le sens de ta question. En fait, c'est sous Firefox 2.0 que ça bug. Je viens de tester sours IE 7 et ça marche nickel...

edit2: j'ai fait un screen de mon pb sous Firefox 2.0

Dernière modification par bobby (20-05-2007 20:45:54)

alakhnor · 20-05-2007 21:33:41

Essaie de mettre le code sans utiliser l'éditeur visuel, il y a des balises <p> partout qui parasitent.

bobby · 20-05-2007 23:32:24

Je n'utilise pas l'éditeur visuel. Et j'ai déjà "nettoyé" le code... sad

Je sais pas si ça peut aider, mais voici ma configuration :
- Version de WordPress : 2.2
- Thème utilisé : Fall Season
- Plugins en place : Akismet, FeedBurner FeedSmith, Google Sitemaps, Maintenance Mode, WordPress Database Backup
- Nom de l'hebergeur : OVH
- Adresse du site : http://www.laurentnaudier.fr/blog/

Ca ne pourrait pas venir de la MAJ de WP?
Je m'explique : le billet que je vous ai donné en exemple est assez vieux (mars dernier). Or depuis, j'ai posté des vidéos et je n'ai pas remarqué ce problème, alors que j'utilisait la même syntaxe (en attendant de régler ce pb, j'ai retiré les vidéos, inutile de les chercher donc).
Or les dernières modifs que j'ai effectuées au blog depuis la dernière vidéo postée, outre la publication de billet, sont : passage à la version 2.2 et installation du plugin FeedBurner FeedSmith.

Dernière modification par bobby (20-05-2007 23:33:23)

bobby · 20-05-2007 23:40:22

C'est bien un bug avec la version 2.2.

Je viens de réinstaller la version 2.1.2 et tout marche nickel... blink

Rod · 21-05-2007 02:17:09

Oui en fait le pb de Matt et ses amis, c'est qu'ils corrigent des bugs kon a rien à foutre, et rajoutent la ou tout le monde se plaint deja qu'il y en a (notamment au niveau de la creation / edition d'un billet) ... il a deja mis 2 ans à admettre que les tags etaient vitaux pour un blog, alors tout espoir n'est pas perdu ...

yazerty · 21-05-2007 07:14:18

Moi qui vient de migrer mon blog avec 2300 billets et 8000 commentaires, ce que tu dis là me rassure Rod tongue ...
Mais il n'y a pas de plugin d'administration qui permet simplement d'avoir un bouton pour sortir un code propre à partir de l'url d'une vidéo ?

Rod · 21-05-2007 14:00:51

J'ai déjà proposé Jquery : en installant Jquery + le plugin Jquery Flash, tu as JUSTE A TAPER DANS TON BILLET L'URL YOUTUBE comme n'importe quelle url, et il te transforme à la volee en te mettant le lecteur Youtube smile et cela, sans plugin, donc ...

Rod · 21-05-2007 14:02:59

Rien de tel qu'une démo :
http://jquery.lukelutman.com/plugins/fl … utube.html

Pareil si tu veux faire du podcast simple et intelligent smile
http://jquery.lukelutman.com/plugins/fl … e-mp3.html

Jquery, l'ami des bloggeurs mais qui preferent installer des plugins à gaz smile

BenKenobi · 21-05-2007 14:22:33

Rod > La version 2.2 utilise du Jquery, donc cela doit être possible directement par défaut non ?

Rod · 21-05-2007 14:30:10

Jquery est integré dans l'admin, pas dans l'interface user. Non ?!

BenKenobi · 21-05-2007 14:47:56

Tu as raison... c'est bien dans l'admin. Mais à partir de cela pas moyen de l'utiliser pour la partie "user" ?

Rod · 21-05-2007 14:56:26

Bien sur : il suffit de linker le Jquery deja present dans l'admin, et de rajouter le plugin FLASH. Avec cela, podcast super simple, et videos youtube ENFIN valide xhtml smile (ben ouais, un simple lien html, on peut pas faire plus "valide" smile )

Merci Jquery smile (bien sur si JS est désactivé, soit 0,1% de la population, les gens voient à la place les liens : donc 100% non obstrusif)

BenKenobi · 21-05-2007 15:07:53

Bon va falloir que je me tente ça... smile

WordPress Francophone

La référence en matiere de moteur de blog.

Le multi-blogs devient un jeu d'enfant !

La communauté, c'est vous qui la faites !

WordPress et vous !

Annonce

#1 03-04-2007 22:37:34

Tutorial : intégrer une vidéo Youtube dans un article

Code:

Code:

Code:

Code:

#2 03-04-2007 23:19:58

Re: Tutorial : intégrer une vidéo Youtube dans un article

#3 03-04-2007 23:27:07

Re: Tutorial : intégrer une vidéo Youtube dans un article

#4 03-04-2007 23:38:42

Re: Tutorial : intégrer une vidéo Youtube dans un article

#5 03-04-2007 23:50:30

Re: Tutorial : intégrer une vidéo Youtube dans un article

#6 03-04-2007 23:55:04

Re: Tutorial : intégrer une vidéo Youtube dans un article

#7 04-04-2007 17:30:43

Re: Tutorial : intégrer une vidéo Youtube dans un article

#8 04-04-2007 18:52:50

Re: Tutorial : intégrer une vidéo Youtube dans un article

#9 05-04-2007 07:21:26

Re: Tutorial : intégrer une vidéo Youtube dans un article

#10 18-05-2007 16:39:06

Re: Tutorial : intégrer une vidéo Youtube dans un article

#11 20-05-2007 17:00:20

Re: Tutorial : intégrer une vidéo Youtube dans un article

#12 20-05-2007 20:21:39

Re: Tutorial : intégrer une vidéo Youtube dans un article

#13 20-05-2007 20:26:24

Re: Tutorial : intégrer une vidéo Youtube dans un article

#14 20-05-2007 21:33:41

Re: Tutorial : intégrer une vidéo Youtube dans un article

#15 20-05-2007 23:32:24

Re: Tutorial : intégrer une vidéo Youtube dans un article

#16 20-05-2007 23:40:22

Re: Tutorial : intégrer une vidéo Youtube dans un article

#17 21-05-2007 02:17:09

Re: Tutorial : intégrer une vidéo Youtube dans un article

#18 21-05-2007 07:14:18

Re: Tutorial : intégrer une vidéo Youtube dans un article

#19 21-05-2007 14:00:51

Re: Tutorial : intégrer une vidéo Youtube dans un article

#20 21-05-2007 14:02:59

Re: Tutorial : intégrer une vidéo Youtube dans un article

#21 21-05-2007 14:22:33

Re: Tutorial : intégrer une vidéo Youtube dans un article

#22 21-05-2007 14:30:10

Re: Tutorial : intégrer une vidéo Youtube dans un article

#23 21-05-2007 14:47:56

Re: Tutorial : intégrer une vidéo Youtube dans un article

#24 21-05-2007 14:56:26

Re: Tutorial : intégrer une vidéo Youtube dans un article

#25 21-05-2007 15:07:53

Re: Tutorial : intégrer une vidéo Youtube dans un article

Pied de page des forums