Guide pour débutants : Comment centrer une vidéo dans WordPress

À nos débuts avec WordPress, centrer une vidéo pouvait être étonnamment frustrant.

Après avoir aidé de nombreux débutants sur WPBeginner, nous avons réalisé que nous n'étions pas seuls : c'est l'une des questions de mise en forme les plus fréquentes.

La bonne nouvelle est que centrer des vidéos dans WordPress est devenu beaucoup plus facile, surtout avec l'éditeur de blocs. Mais nous voyons encore beaucoup de gens avoir des difficultés avec cela, en particulier lorsqu'ils travaillent avec des vidéos intégrées de YouTube ou Vimeo.

Dans ce guide pour débutants, nous vous montrerons les moyens les plus simples de centrer vos vidéos dans WordPress.

Pourquoi centrer les vidéos dans WordPress ?

Par défaut, WordPress aligne les vidéos intégrées ou téléchargées sur le côté gauche de la zone de contenu. Cela peut rendre la page déséquilibrée, surtout lorsque la vidéo est l'élément principal.

Centrer la vidéo résout ce problème et rend la mise en page plus propre et plus intentionnelle :

• Meilleur équilibre visuel : Maintient la mise en page uniforme et évite les espaces vides gênants d'un côté.
• Mise au point plus forte : Attire naturellement l'attention sur la vidéo en tant qu'élément principal de la page.
• Expérience utilisateur améliorée : Rend le flux de contenu plus fluide et plus facile à suivre.

C'est un changement simple, mais il peut améliorer visiblement l'apparence et la sensation de votre page.

Cela dit, voyons comment vous pouvez facilement centrer une vidéo sur un site Web WordPress.

Nous couvrirons à la fois l'éditeur de blocs et l'éditeur classique, vous pouvez donc cliquer sur les liens ci-dessous pour accéder à n'importe quelle section :

Comment centrer une vidéo dans l'éditeur de contenu WordPress

Pour centrer une vidéo intégrée depuis YouTube ou Vimeo, la méthode la plus simple consiste à coller son URL directement dans l'éditeur de contenu WordPress.

WordPress la convertira automatiquement en un bloc vidéo dédié.

Alternativement, vous pouvez ajouter un bloc vidéo ou télécharger une vidéo directement dans votre médiathèque WordPress.

Ensuite, sélectionnez le bloc Vidéo, puis cliquez sur l'option « Modifier l'alignement ». Dans le menu déroulant, vous pouvez choisir la position de la vidéo.

WordPress vous permet de choisir parmi les alignements suivants, chacun servant un objectif différent pour l'affichage de votre vidéo :

• Large : Étend la vidéo au-delà de la colonne de contenu principale, mais pas jusqu'au bord de l'écran. Cette option nécessite le support de votre thème WordPress.
• Pleine largeur : Étend la vidéo sur toute la largeur de la fenêtre du navigateur. Comme pour la largeur 'Large', cela dépend également du support de votre thème.
• Aligner à gauche : Positionne la vidéo sur le côté gauche de la zone de contenu. C'est l'alignement par défaut pour de nombreux blocs.
• Centrer : Place la vidéo précisément au milieu de la zone de contenu, créant un point focal clair. C'est l'option sur laquelle nous nous concentrons dans ce guide !
• Aligner à droite : Positionne la vidéo sur le côté droit de la zone de contenu.

Allez-y et sélectionnez l'option « Centrer ».

Après cela, vous pouvez prévisualiser et publier votre page ou votre article.

La vidéo sera maintenant centrée.

Cependant, vous devrez peut-être utiliser le code d'intégration complet si vous souhaitez ajouter des options de lecture spéciales (comme le démarrage de la vidéo à un moment précis) ou si vous utilisez une plateforme vidéo que WordPress n'intègre pas automatiquement.

Si vous avez déjà un bloc vidéo (comme YouTube ou Vimeo) et que vous devez ajouter du code personnalisé, cliquez sur l'icône à trois points sur la barre d'outils du bloc et sélectionnez 'Modifier en HTML'.

Si vous intégrez depuis une plateforme que WordPress ne prend pas en charge automatiquement, vous ajouterez d'abord un bloc HTML personnalisé, puis vous y collerez votre code d'intégration.

Ensuite, vous pouvez entrer le morceau de code HTML suivant autour du code d'intégration de la vidéo. Assurez-vous d'utiliser des commentaires HTML appropriés et de supprimer tout texte promotionnel dans l'exemple de code lui-même :

<div style="text-align:center;">

/// your video embed code goes here

</div>

Voici à quoi ressemblera votre code d'intégration avec le HTML personnalisé :

Vous pouvez maintenant enregistrer vos modifications et prévisualiser l'article ou la page pour voir votre vidéo parfaitement centrée.

Une autre approche consiste à augmenter manuellement la largeur de votre vidéo pour qu'elle s'adapte à la zone de contenu. Pour ce faire, vous devez ajouter ou modifier le paramètre « width » dans votre code d'intégration :

<iframe width="760" height="315" src="https://www.youtube.com/embed/4YpyiJ05YOg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Comment centrer une vidéo dans l'éditeur classique

Si vous utilisez l'éditeur classique, vous pouvez centrer les vidéos en modifiant un article ou en en créant un nouveau.

Une fois dans l'éditeur, passez à la vue Texte. Entrez maintenant le code HTML suivant :

<div style="text-align:center;">

/// your video embed code goes here

</div>

Assurez-vous simplement de remplacer « votre code d'intégration vidéo va ici » par le code d'intégration de votre vidéo.

Une fois cela fait, cela ressemblera à ceci :

Vous pouvez maintenant prévisualiser et publier votre page.

Visitez simplement votre site Web pour voir la vidéo centrée.

Foire aux questions sur le centrage des vidéos

Voici quelques questions que nos lecteurs posent fréquemment sur le centrage des vidéos dans WordPress :

Pourquoi ne vois-je pas les options d'alignement « Largeur large » et « Pleine largeur » ?

Les options « Largeur large » et « Pleine largeur » sont des fonctionnalités qui doivent être prises en charge par votre thème WordPress. Si vous ne les voyez pas dans la barre d'outils d'alignement, cela signifie que votre thème actuel ne les a pas activées. Vous pourrez toujours utiliser l'option standard « Aligner au centre ».

Le centrage de ma vidéo affectera-t-il son apparence sur les appareils mobiles ?

Non, le centrage d'une vidéo à l'aide des outils standard de l'éditeur de blocs WordPress est entièrement réactif. WordPress gère automatiquement la mise à l'échelle pour garantir que votre vidéo s'affiche parfaitement sur les petits écrans comme les tablettes et les smartphones.

Puis-je centrer une vidéo que j'ai téléchargée directement sur WordPress ?

Oui. Le processus est exactement le même pour les vidéos intégrées et les vidéos que vous téléchargez directement dans votre médiathèque. Sélectionnez simplement le bloc Vidéo et utilisez la barre d'outils d'alignement pour la centrer.

Nous espérons que cet article vous a aidé à apprendre comment centrer une vidéo dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment ajouter des caractères spéciaux dans les articles WordPress et des conseils essentiels pour utiliser les shortcodes dans WordPress.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.