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 à gauche. C'est un choix sûr car l'éditeur ne peut pas deviner votre mise en page préférée pour chaque page.

Cependant, laisser une vidéo alignée à gauche crée souvent un espace blanc gênant et peut donner une impression de déséquilibre au design. Une vidéo centrée, en revanche, crée un point focal clair pour attirer l'attention de votre visiteur.

Centrer votre vidéo aide à guider le regard de l'utilisateur et offre une bien meilleure expérience de visionnage.

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
• Comment centrer une vidéo dans l'éditeur classique
• Foire aux questions sur le centrage des vidéos

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

Si vous souhaitez que votre vidéo remplisse la largeur de votre zone de contenu, la meilleure façon de procéder est d'ajouter une URL de vidéo YouTube ou Vimeo directement dans l'éditeur de contenu WordPress.

Tout d'abord, vous devrez modifier un article ou une page, ou en ajouter un nouveau. Une fois dans l'éditeur de contenu, collez simplement le lien de la vidéo. WordPress intégrera automatiquement la vidéo.

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 :

• Largeur étendue
• Pleine largeur
• Aligner à gauche
• Centrer
• Aligner à droite

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.

Dans ce cas, vous devrez ajouter un simple HTML autour du code d'intégration de votre vidéo.

Tout d'abord, vous devez cliquer sur les 3 icônes en pointillés dans le bloc vidéo. Ensuite, vous pouvez sélectionner l'option « Modifier en HTML » dans le menu déroulant.

Ensuite, vous pouvez insérer le morceau de code HTML suivant autour du code d'intégration de la vidéo :

<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 conseils essentiels pour utiliser les shortcodes dans WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.