Nel corso degli anni WPBeginner ha creato molti video e li ha aggiunti ai post dei suoi blog su WordPress. Tuttavia, a volte abbiamo riscontrato problemi di allineamento al centro dei video quando venivano aggiunti all’articolo.
Abbiamo scoperto che se la larghezza del video è inferiore a quella dell’articolo, WordPress lo allinea automaticamente a sinistra, lasciando uno spazio bianco extra sul lato destro. Se anche voi avete lo stesso problema, questa guida fa al caso vostro.
In questo articolo vi mostreremo come centrare facilmente un video in WordPress.
Perché centrare i video in WordPress?
Quando si incorpora un video in WordPress, questo viene allineato automaticamente a sinistra per impostazione predefinita. Questo perché i video sono contenuti esterni incorporati nel contenuto, quindi WordPress non è in grado di indovinare come si desidera visualizzarli.
Come prassi ottimale, viene allineato automaticamente a sinistra, lasciando all’utente la possibilità di regolare l’allineamento se necessario.
Allineando il video al centro, gli utenti avranno un’esperienza migliore nella visualizzazione dei vostri contenuti. In questo modo, non si avrà uno spazio vuoto evidente su un lato della pagina, che potrebbe dare un aspetto poco professionale.
Inoltre, se caricate i video direttamente su WordPress, la stessa cosa accadrà se la loro larghezza è inferiore all’area dei contenuti. WordPress li allineerà a sinistra per impostazione predefinita.
Detto questo, vediamo come è possibile allineare facilmente al centro un video in un sito web WordPress. Verranno trattati sia l’editor a blocchi che l’editor classico, quindi potete fare clic sui link sottostanti per passare a qualsiasi sezione.
Come allineare al centro i video nell’editor di contenuti di WordPress
Se volete che il vostro video occupi la larghezza dell’area dei contenuti, il modo migliore per farlo è aggiungere l’URL di un video di YouTube o Vimeo direttamente nell’editor dei contenuti di WordPress.
Per prima cosa, è necessario modificare un post o una pagina o aggiungerne una nuova. Una volta entrati nell’editor di contenuti, è sufficiente incollare il link al video. WordPress incorporerà il video automaticamente.
Quindi, selezionare il blocco Video e fare clic sull’opzione ‘Cambia allineamento’. Dal menu a discesa è possibile scegliere la posizione del video.
WordPress consente di scegliere tra i seguenti allineamenti:
- larghezza ampia
- larghezza totale
- allineare a sinistra
- allineare il centro
- allineare a destra.
Selezionate l’opzione “Allinea al centro”.
Dopodiché, è possibile visualizzare l’anteprima e pubblicare la pagina o il post.
Il video sarà ora allineato al centro.
Tuttavia, per un motivo o per l’altro, potrebbe essere necessario utilizzare il codice incorpora. In questo caso, è necessario aggiungere del semplice HTML intorno al codice incorpora del video.
Per prima cosa, è necessario fare clic sulle 3 icone tratteggiate nel blocco video. Successivamente, è possibile selezionare l’opzione ‘Modifica come HTML’ dal menu a discesa.
Successivamente, è possibile inserire il seguente codice HTML intorno al codice di incorporamento del video:
<div style="text-align:center;">
/// your video embed code goes here
</div>
Ecco come appare il codice embed con l’HTML personalizzato.
Ora è possibile salvare le modifiche e vedere l’anteprima della pagina o del post. Ora sapete come centrare un video in HTML.
Un altro approccio consiste nell’aumentare manualmente la larghezza del video per adattarlo all’area del contenuto. A tal fine, è necessario aggiungere o modificare il parametro ‘width’ nel codice embed.
<iframe width="760" height="315" src="https://www.youtube.com/embed/4YpyiJ05YOg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Come centrare il video nell’editor classico
Se si utilizza l’Editor classico, è possibile allineare al centro i video modificando una pubblicazione o creandone una nuova.
Una volta entrati nell’editor, passare alla vista Testo. Ora inserite il seguente codice HTML:
<div style="text-align:center;">
/// your video embed code goes here
</div>
Assicuratevi di sostituire “il codice di incorporamento del vostro video va qui” con il codice di incorporamento del vostro video.
Una volta terminato, l’aspetto sarà simile a questo:
Ora è possibile visualizzare l’anteprima e pubblicare la pagina.
È sufficiente visitare il vostro sito web per vedere il video allineato al centro.
Speriamo che questo articolo vi abbia aiutato a capire come centrare un video in WordPress. Potreste anche consultare la nostra guida su come add-onare i caratteri speciali nelle pubblicazioni di WordPress e i consigli essenziali per l’uso degli shortcode in WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e 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/
Admin
Tom Z
Thanks for posting this, it worked and was very helpful!
WPBeginner Support
Glad to hear our guide was helpful!
Admin
Marc
Thanks for the info!!
WPBeginner Support
You’re welcome!
Admin
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/
Admin
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.
Admin
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.
Admin
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.
Admin
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!!