Comment centrer une vidéo Youtube dans WordPress

Photo of author
Écrit par Grégory Hénique
Blogueur SEO depuis 2009.
J'aide les entreprises à créer du contenu qui ranke par l'écriture SEO et l'IA maîtrisée.
✍️ Maj'Article IA : 14€ – 49€
Présentation

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 :

✍️
Maj'Article IA — Service Humain + IA

Je mets à jour ou crée vos articles personnellement, assisté par l'IA, avec optimisation SEO incluse.

📝 Mise à jour14 €
✨ Création49 €
✅ Livraison 24h • ✅ Facture fournie • ✅ Optimisation SEO incluse

<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 entreprises et les sites qui veulent du contenu qui ranke vraiment.

🤖 Self-service
14€ – 49€ via Maj'Article IA
💼 Sur-mesure
Devis personnalisé (150€+)

Outils que j'utilise et recommande :

Liens affiliés sans surcoût pour vous — Merci de soutenir le blog !

18 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