Comment centrer une vidéo Youtube dans WordPress

Photo of author
Écrit par Grégory Hénique

Mon goût pour la liberté : internet, lectures, culture, et quelques tutos utiles.

EDIT du 02/03/2018 :

Je vous livre telle quelle une autre astuce intéressante :

Celle de vous rendre tout simplement sur le site http://embedresponsively.com/ et d’insérer par simple copier/coller l’adresse URL de votre vidéo youtube ( https://youtube.com/watch?v=xxxxxxxxxxx ).

Appuyez ensuite sur « Embed ».

Le site vous régurgite alors un code à coller dans la version HTML de votre site (pour WordPress cliquez simplement sur la case Texte pour avoir accès à cette version de votre article).

La vidéo Youtube apparaîtra alors aggrandie jusqu’aux bords de votre article, quelle que soit sa dimension et quel que soit le support (smartphone, pc, etc.)

Comment centrer une vidéo sous Youtube

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.

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

JE VOUS APPORTE MON SERVICE

Blogueur depuis 2009, j'accompagne les créateurs et les marques qui recherchent de l'expertise humaine en même temps que la puissance de l'IA pour leurs contenus.

SEO technique, rapidité et qualité de rédaction : j'écris vos articles et j'apporte mon expérience.

Intéressé ? écrivez-moi directement, je réponds sous 48h.

gregory@desgeeksetdeslettres.com • Audit gratuit • Réponse sous 48h

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

Centrer une vidéo Youtube sous WordPress

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>

🚀 Besoin d'un contenu optimisé IA + SEO ?

Je propose mes services de rédaction web assistée par IA pour les blogs, les gros sites, les entreprises qui travaillent sur leur contenu.

Ecrits humains, stratégiques et bien classés sur Google.

Voir mes services

P.S. : J'utilise aussi uncensored.com (pour avoir un chat LLM non filtré) et NordVPN (pour ne plus être censuré sur internet) — liens affiliés promotionnels sans surcoût pour vous.

13 réflexions au sujet de “Comment centrer une vidéo Youtube dans WordPress”

  1. Bjr Dominique,
    En effet j’ai la même impression que toi, WordPress a dû faire une modif.
    Faudra peut-être que je mette à jour l’article mais les codes peuvent servir à certains.
    Bonne continuation.

  2. Bonjour. Comme l’article date un peu (et même les mises à jour), peut-être que tout à changer mais pour centrer une vidéo, il suffit de récupérer le code (<iframe…) de le coller dans l'article avec texte (dans wordpress) puis une fois retourner dans l'éditeur de mettre le curseur à côté de la vidéo et de cliquer sur le centrage du texte. Je ne parle que des éditeurs classiques, pas de Gounnnteur beurk que je n'aime pas du tout 😉
    Cordialement et merci de ton travail

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

Laisser un commentaire