Logo site Des Geeks et des lettres

L'application pour surveiller / sauvegarder vos smartphonesL'oeil inquisiteur de Bibispy

Comment centrer une vidéo Youtube dans WordPress

J’utilise souvent Youtube pour insérer des clips / vidéos dans mes articles. Mais j’ai l’impression que depuis le passage au HTML5, quelque chose a changé : je n’arrive plus à centrer ces vidéos Youtube dans mon texte.

Auparvant, dans le code source, j’insérais :

<p style="text-align: center;">...</p>

de part et d’autre du code source de la vidéo, et ça marchait.

Le code tout simple :

<center>...</center>

fonctionnait aussi. Mais plus maintenant.

J’ai cherché la solution et j’ai constaté qu’en fait, seule la commande suivante fonctionne pour centrer le code Youtube :

<div align="center">...</div>

Ça peut peut-être vous servir (lancez pas les pierres, je ne suis pas un codeur pro 😀 )

EDIT : Le code de Mimie

Code donné par Mimie dans les commentaires ci-dessous, je le reproduis ici parce qu’en effet, après test il fonctionne bien :

<center>...</center> ainsi que <div align="center"> sont devenus des balises/attributs obsolètes de nos jours, même si elles sont plus ou moins bien considérés par les différents navigateurs …

Etant donné que l’insertion d’une vidéo youtube (ou autre d’ailleurs) se fait avec un bout de code ressemblant à cela : <iframe width="575" height="323" src="//www.youtube.com/embed/h_9-3Fj3ZdI?rel=0" frameborder="0" allowfullscreen=""></iframe>, la meilleure solution est pour moi l’ajout du style suivant sur la balise iframe : “margin: 0 auto” (l’attribut width jouant bien son rôle).

Ce qui se traduit donc au final par l’insertion d’un code tel que :

<iframe style="margin: 0 auto" width="575" height="323" src="//www.youtube.com/embed/h_9-3Fj3ZdI?rel=0" frameborder="0" allowfullscreen=""></iframe>

 

Wordpress et autour de WordPress

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Mimie 23 décembre 2013, 17 05

    Je te jette un galet pour la peine !! 🙂

    <center> … </center> ainsi que <div align= »center »> sont devenus des balises/attributs obsolètes de nos jours, même si elles sont plus ou moins bien considérés par les différents navigateurs …

    Etant donné que l’insertion d’une vidéo youtube (ou autre d’ailleurs) se fait avec un bout de code ressemblant à cela : <iframe width="575" height="323" src="//www.youtube.com/embed/h_9-3Fj3ZdI?rel=0" frameborder="0" allowfullscreen=""></iframe>, la meilleure solution est pour moi l’ajout du style suivant sur la balise iframe : « margin: 0 auto » (l’attribut width jouant bien son rôle).

    Ce qui se traduit donc au final par l’insertion d’un code tel que :
    <iframe style="margin: 0 auto" width="575" height="323" src="//www.youtube.com/embed/h_9-3Fj3ZdI?rel=0" frameborder="0" allowfullscreen=""></iframe>

    Réponds !

  • Greg 23 décembre 2013, 17 05

    Hop ! je choppe ton galet et je testerai ton code, peut me rendre 🙂

    Réponds !

  • Greg 24 décembre 2013, 11 11

    Ok, ton code marche impec, je le rajoute dans l’article. Thx !

    Réponds !

  • giga34Y 27 décembre 2013, 22 10

    merci pour greg et mimi pour les codes ,maintenant ,on a plus de choix pour insérer nos vidéos!

    Réponds !

  • Pierre de nonconventionalsourcesofenergy 4 mai 2014, 10 10

    oui sauf que ça ne marche pas!

    Réponds !

  • Greg 7 mai 2014, 22 10

    T’as essayé de mettre Wordpress à jour ? Chez moi ça fonctionne. (mettre à jour le HTML 5 aussi)

    Réponds !

  • Canima 30 octobre 2014, 9 09

    Super, avec … ça fonctionne, merci pour cette astuce !

    J’ai enfin pu centrer mes vidéos 🙂
    http://canima.net/videos-canima/

    Réponds !

  • Greg 30 octobre 2014, 18 06

Article suivant:

Article précédent:

Recherche

A vos stylos !

  • Greg: “Ahah. Tu m'étonnes.Déc 8, 21:19
  • Benjamin: “Ahah ! J'aime ces coups de gueule, pour la peine je verrai pas ce film, fuck !Déc 8, 19:52
  • Greg: “Non, j'ai l'impression que Pinterest empêche l'utilisation de plugin annexes (je me trompe peut-être)Déc 8, 18:26
  • danielle: “vous avez réussi à afficher? j'ai le meme problème avec Safari je n'arrive pas à afficher certaines photosDéc 8, 18:12
  • Greg: “Salut Ben, Peut-être, je ne me souvenais plus que tu m'en avais parlé, mais bonne perle sympathique en effet…Déc 7, 21:33
  • etienne minsongo mendo: “Bsr à tousje suis Etienne Minsongo apprenti programmeur! je voudrais savoir: le serveur local XAMPP.... aurait-il des inconvénients?Déc 7, 15:45
Share This