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.
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.
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 ».
Ensuite, vous pouvez prévisualiser et publier votre page ou votre publication.
La vidéo est désormais centrée.
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.
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é.
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 :
Vous pouvez maintenant prévisualiser et publier votre page.
Il suffit de se rendre sur votre site pour voir la vidéo centrée.
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.
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.
WPBeginner Support
For multiple videos, you would want to set up multi-column content following our guide below:
https://www.wpbeginner.com/plugins/how-to-add-multi-column-content-in-wordpress-posts-no-html-required/
Administrateur
Tom Z
Thanks for posting this, it worked and was very helpful!
WPBeginner Support
Glad to hear our guide was helpful!
Administrateur
Marc
Thanks for the info!!
WPBeginner Support
You’re welcome!
Administrateur
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?
WPBeginner Support
You should have the image alignment tools from our article below:
https://www.wpbeginner.com/beginners-guide/how-to-add-and-align-images-in-wordpress-block-editor/
Administrateur
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
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
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
Young
thank you for the article! very helpful
Deb
Thank you, this article was very helpful!
Carole
Adding the div html around the embed code worked like a charm. Thanks!
bilikid
Thanks for this. Definitely plan on trying it!!