Volete allineare al centro un video in WordPress?
Per impostazione predefinita, se la larghezza del video è inferiore all’area dell’articolo, WordPress lo allinea automaticamente a sinistra, lasciando uno spazio bianco extra sul lato destro.
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 WordPress. Tratteremo sia l’editor a blocchi che l’editor classico, quindi potete cliccare 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, a volte, per un motivo o per l’altro, potrebbe essere necessario utilizzare il codice incorporato. In questo caso, è necessario aggiungere del semplice HTML intorno al codice di incorporamento 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 visualizzare l’anteprima del post o della pagina. 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 i video al centro modificando un post o creandone uno nuovo.
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 aprire un blog WordPress e sui plugin WordPress indispensabili.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e 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/
Admin
Tom Z says
Thanks for posting this, it worked and was very helpful!
WPBeginner Support says
Glad to hear our guide was helpful!
Admin
Marc says
Thanks for the info!!
WPBeginner Support says
You’re welcome!
Admin
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/
Admin
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.
Admin
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.
Admin
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.
Admin
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!!