Voulez-vous centrer une vidéo dans WordPress ?
Par défaut, si la largeur de votre vidéo est inférieure à la surface de votre article, WordPress l’aligne automatiquement sur la gauche, laissant un espace blanc supplémentaire sur le côté droit.
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, il peut arriver que, pour une raison ou une autre, vous ayez besoin d’utiliser le code d’intégration. 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 création d’un blog WordPress et les extensions WordPress indispensables.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
A Owadud Bhuiyan says
if I have three YouTube videos, can I show them in the same row by adjusting the width?
Thanks for the tips.
WPBeginner Support says
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 says
Thanks for posting this, it worked and was very helpful!
WPBeginner Support says
Glad to hear our guide was helpful!
Administrateur
Marc says
Thanks for the info!!
WPBeginner Support says
You’re welcome!
Administrateur
S says
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 says
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 says
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 says
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 says
The tip sounds great, but every time I « save » and come back, it’s gone.
WPBeginner Support says
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 says
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 says
Hi Himanshu,
You can try switching to the HTML editor to add the code. Hopefully it would work then.
Administrateur
Young says
thank you for the article! very helpful
Deb says
Thank you, this article was very helpful!
Carole says
Adding the div html around the embed code worked like a charm. Thanks!
bilikid says
Thanks for this. Definitely plan on trying it!!