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

Suite à la migration du forum, chaque utilisateur devra lancer une procédure de réinitialisation du mot de passe pour pouvoir se connecter. Merci !

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 44)
  • Auteur
    Messages
  • #451412

    alakhnor
    Participant
    Maître WordPress
    998 contributions

    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 :

    <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 :

    <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>

    :wp:

    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 :

    <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 :

    <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 320×240 : http://img.youtube.com/vi/_QIpic5HuXo.jpg/0.jpg
    – une vignette 137×97 : http://img.youtube.com/vi/_QIpic5HuXo.jpg/2.jpg

    #597052

    benkenobi
    Gestionnaire du forum
    Maître WordPress
    4360 contributions

    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… 😉

    #597053

    alakhnor
    Participant
    Maître WordPress
    998 contributions

    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. 😉

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

    #597054

    Rod
    Membre
    Maître WordPress
    744 contributions

    Mais en Jquery, c’est encore mieux, mais tout le monde semble bouder Jquery, ici :(

    #597055

    alakhnor
    Participant
    Maître WordPress
    998 contributions

    Faut voir, certains plugins jquery utilisent swfobject. 😋

    #597056

    Rod
    Membre
    Maître WordPress
    744 contributions

    ouais sauf que dans ton code tu as

    nom du fichier

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

    #597057

    mariewp
    Membre
    Initié WordPress
    25 contributions

    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 ?

    #597058

    alakhnor
    Participant
    Maître WordPress
    998 contributions
    #597059

    Rod
    Membre
    Maître WordPress
    744 contributions

    http://jquery.lukelutman.com/plugins/flash/example-youtube.html

    voila, meme l’editeur visuel sera content …

    #597060

    yazerty
    Membre
    Chevalier WordPress
    158 contributions

    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 🙂. 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) ?

    #597061

    bobby
    Participant
    Padawan WordPress
    52 contributions

    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.

    #597062

    alakhnor
    Participant
    Maître WordPress
    998 contributions

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

    #597063

    bobby
    Participant
    Padawan WordPress
    52 contributions

    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

    #597064

    alakhnor
    Participant
    Maître WordPress
    998 contributions

    Essaie de mettre le code sans utiliser l’éditeur visuel, il y a des balises

    partout qui parasitent.

    #597065

    bobby
    Participant
    Padawan WordPress
    52 contributions

    Je n’utilise pas l’éditeur visuel. Et j’ai déjà « nettoyé » le code… :(

    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.

15 sujets de 1 à 15 (sur un total de 44)
  • Le forum ‘Dépôts pour les extensions, trucs, astuces’ est fermé à de nouveaux sujets et réponses.