Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Guide du débutant : Comment centrer une vidéo dans WordPress

Au fil des ans, chez WPBeginner, nous avons créé de nombreuses vidéos et les avons ajoutées à nos publications de blog WordPress. Cependant, nous avons parfois rencontré des problèmes d’alignement central des vidéos lorsqu’elles étaient ajoutées à l’article.

Ce que nous avons trouvé, c’est que si la largeur de votre vidéo est inférieure à la zone de votre article, alors WordPress l’aligne automatiquement à gauche, laissant un espace blanc supplémentaire sur le côté droit. Si vous rencontrez le même problème, ce guide est fait pour vous.

Dans cet article, nous allons vous afficher comment centrer facilement une vidéo dans WordPress.

How to center align a video in WordPress

Pourquoi centrer les vidéos dans WordPress ?

Lorsque vous embarquez une vidéo dans WordPress, elle s’aligne automatiquement à gauche par défaut. Cela s’explique par le fait que les vidéos sont des contenus externes embarqués dans le contenu, et que WordPress n’est donc pas en mesure de deviner comment vous souhaitez les afficher.

La meilleure pratique consiste à l’aligner automatiquement à gauche, en vous laissant le soin d’ajuster l’alignement si nécessaire.

En alignant la vidéo au centre, les utilisateurs/utilisatrices auront une meilleure expérience de la vue de votre contenu. De cette façon, vous n’aurez pas d’espace vide perceptible sur l’un des côtés de la page, ce qui pourrait donner un aspect non professionnel.

D’ailleurs, si vous téléversez des vidéos directement sur WordPress, il leur arrivera la même chose si leur largeur est inférieure à votre zone de contenu. WordPress les alignera à gauche par défaut.

Ceci étant dit, voyons comment vous pouvez facilement centrer une vidéo dans un site WordPress. Nous couvrirons à la fois l’éditeur de blocs et l’éditeur classique, vous pouvez donc cliquer sur les liens ci-dessous pour passer à n’importe quelle section.

Comment centrer une vidéo dans l’éditeur/éditrices de contenu de 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 les éditeurs/éditrices de contenu de WordPress.

Tout d’abord, vous devrez modifier une publication ou une page, ou en ajouter une nouvelle. Une fois que vous êtes dans l’éditeur/éditrices de contenu, il vous suffit de coller le lien vers la vidéo. WordPress intégrera la vidéo automatiquement.

Paste video embed code in block editor

Sélectionné, le bloc Vidéo est ensuite cliqué 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 :

  • grande largeur
  • largeur totale
  • aligner à gauche
  • aligner le centre
  • aligner à droite.

Sélectionnez l’option « Aligner au centre ».

Align the video to the center

Ensuite, vous pouvez prévisualiser et publier votre page ou votre publication.

La vidéo est désormais centrée.

Center aligned video preview

Cependant, pour une raison ou une autre, il se peut que vous deviez utiliser le code embarqué. Dans ce cas, vous devrez ajouter du HTML simple 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.

Edit as HTML

Saisissez ensuite le code HTML abonné autour du code d’intégration de la vidéo :

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

/// your video embed code goes here

</div>

Voici à quoi ressemblerait votre code d’intégration avec le HTML personnalisé.

Preview of custom HTML code

Vous pouvez maintenant enregistrer vos modifications et prévisualiser la publication ou la page. Vous savez maintenant comment centrer une vidéo en HTML.

Une autre approche consiste à augmenter manuellement la largeur de votre vidéo pour l’adapter à 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 une publication ou en en créant une nouvelle.

Une fois dans l’éditeur, passez à la vue Texte. Saisissez le code HTML suivant :

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

/// your video embed code goes here

</div>

Confirmez simplement que vous remplacez « le code d’intégration de votre vidéo se trouve ici » par le code d’intégration de votre vidéo.

Une fois que c’est fait, cela ressemblera à quelque chose comme ça :

Center align videos in classic editor

Vous pouvez maintenant prévisualiser et publier votre page.

Il suffit de se rendre sur votre site pour voir la vidéo centrée.

Center aligned video classic editor preview

Nous espérons que cet article vous a aidé à apprendre comment centrer une vidéo dans WordPress. Vous pouvez également consulter notre guide sur la façon d’ajouter des caractères spéciaux dans les publications WordPress et les astuces essentielles pour utiliser les codes courts dans WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

18 commentairesLaisser une réponse

  1. A Owadud Bhuiyan

    if I have three YouTube videos, can I show them in the same row by adjusting the width?

    Thanks for the tips.

  2. Tom Z

    Thanks for posting this, it worked and was very helpful!

    • WPBeginner Support

      Glad to hear our guide was helpful!

      Administrateur

    • WPBeginner Support

      You’re welcome!

      Administrateur

  3. S

    I’m trying to center a gif that I’ve embedded and the new editor doesn’t let me edit the HTML of this type of content. How can I center this?

  4. Diane

    How does this work when using the Gutenberg Editor’s You Tube embed block? I tried both ways you described, but either are working.

    • WPBeginner Support

      With the YouTube embed block there should be a section when you select the block to set a specific alignment that you can use.

      Administrateur

  5. Marshall

    The tip sounds great, but every time I « save » and come back, it’s gone.

    • WPBeginner Support

      You may want to try to clear any caching on your site to ensure you’re not seeing the cached version of the page.

      Administrateur

  6. Himanshu

    You offer a lot of outstanding tricks and videos to go along. I have subscribed to your email newsletter and have seen many videos for my new website. However, your trick on aligning the video on the center did not work. Here is the issue: I shot a 15-sec video on iPhone converted into mp4 and uploaded on my host server, shows up in my Wordpress galley. Since the video occupies the entire width, I changed the video width and height to a 1/3 each. Then I pasted the align center code you showed on your video at https://www.wpbeginner.com/beginners-guide/beginners-guide-how-to-center-align-a-video-in-wordpress/#respond

    But the video does not align in the center. When I look at the video in the frontend editor, I see a box with a blue line that occupies the entire width even when the video is 1/3 the width. Looks like this blue line box cannot be made smaller with any code. Is that true? Any tricks in your bag of trick that you can share?

    You have been great and thanks for your videos. you made my life so much easier.

    • WPBeginner Support

      Hi Himanshu,

      You can try switching to the HTML editor to add the code. Hopefully it would work then.

      Administrateur

  7. Young

    thank you for the article! very helpful

  8. Deb

    Thank you, this article was very helpful!

  9. Carole

    Adding the div html around the embed code worked like a charm. Thanks!

  10. bilikid

    Thanks for this. Definitely plan on trying it!!

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.