E-Entraînement, E-Formation et Educ Pop 2.0

Espace de mutualisation pédagogique de formateurs du ministère des sports, de la jeunesse, de l'éducation populaire et de la vie associative

WordPress: inserer une vidéo youtube dans sidebar et démarrage automatique de la vidéo à l’ouverture du blog


Bonjour,

Un petit « truc et astuce » wordpress. L’insertion d’une vidéo dans un widget texte sur sidebar et surtout le démarrage automatique de la vidéo à l’ouverture du blog…

L’incrustation d’une vidéo youtube dans un widget ne se fait pas de la même manière que dans un article ou une page où il suffit seulement de récupérer le code de partage et l’insérer dans le texte.

Pour avoir une vidéo youtube en widget, donc dans une des colonnes de la page d’accueil et des autres pages de votre blog, une petite manip est nécessaire.

  • Dans Apparence de votre tableau de bord, ouvrir un widget texte
  • copier-coller le code html suivant:

Code youtube

  • Si l’adresse de la vidéo youtube est par exemple youtube.com/watch?v=12345abcdef , vous remplacez les X par 12345abcdef dans le code ci-dessus.
  • Ajuster la largeur et la hauteur en relation avec les dimensions de votre barre latérale (sidebar)
  • Enregistrer, et voilà votre vidéo est désormais incruster dans votre sidebar.

Maintenant, vous vous dîtes, « ce serait bien que la vidéo démarre à chaque ouverture du blog »… ça permet d’augmenter le nombre de vues sur youtube… là aussi une petite manip est nécessaire

  • Si l’url de votre vidéo est de cette forme http://www.youtube.com/watch?v=12345abcdef, il vous faut remplacer le watch?v= par v/

Vous obtenez `http://www.youtube.com/v/12345abcdef`

Si l’url était déjà de cette forme ne touchez à rien!

  • Ce nouvel url, vous le copiez-collez dans le code ci-dessous à la place de URL_MODIFIER

Code youtube widget

  • Ajuster les dimensions directement dans le code, insérer ce code dans un widget texte ou éditeur html

Donc pour l’exemple ci dessus :

Code youtube widget

  • Enregistrer. Votre vidéo démarrera désormais à chaque ouverture

Voir un exemple, Presqu’île Danse

Bonne manip’

Stéphane

7 réponses à “WordPress: inserer une vidéo youtube dans sidebar et démarrage automatique de la vidéo à l’ouverture du blog

  1. destinationmode octobre 19, 2013 à 10:36

    Merci beaucoup pour ce tuto, grâce à toi j’ai pu enfin intégrer ma vidéo dans l’une de mes colonnes ! Au plaisir, Gaétane

  2. ℓιℓℓσυ février 6, 2014 à 10:59

    merci beaucoup pour ce tuto précis, j’

  3. ℓιℓℓσυ février 6, 2014 à 11:00

    j’ai réussi à intégrer une vidéo you tube dans un widget texte…Amicalement Lilou

  4. thibaultm2014 février 23, 2014 à 3:42

    Bonjour,

    Ca ne fonctionne pas chez moi. J’ai un carré blanc à la place de la vide dans ma sidebar a droite…

    possibilité de coller le code ?

    [gigya src="https://www.youtube.com/watch?v=KXPWh2Jk1nc?version=3" width="235" height="176" allowscriptaccess="always" allowfullscreen="true"]

    voila le mien..rien n’y fait:/

    Merci

    • Stéphane Krause mars 3, 2014 à 3:02

      Bonjour,
      Vous pouvez essayer avec ce code [gigya src="http://www.youtube.com/v/KXPWh2Jk1nc?version=3" flashvars="autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="235" height="176"]

      Je l’ai essayé sur des blogs et ça marche désormais
      Cordialement,
      Stéphane

  5. le blabla de l'espace février 3, 2015 à 12:13

    je comprend pas dans mon nouveau blog, j’ai mis youtube en demarrage, cela fonctionnait, et pis paf, vla ti po, que ya tjrs la video, mais elle s’enclenche plus du tout,
    pourquoi ,,?

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :