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

Guida per principianti: Come allineare al centro un video in WordPress

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.

How to center align a 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.

Paste video embed code in block editor

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”.

Align the video to the center

Dopodiché, è possibile visualizzare l’anteprima e pubblicare la pagina o il post.

Il video sarà ora allineato al centro.

Center aligned video preview

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.

Edit as HTML

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.

Preview of custom HTML code

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:

Center align videos in classic editor

Ora è possibile visualizzare l’anteprima e pubblicare la pagina.

È sufficiente visitare il vostro sito web per vedere il video allineato al centro.

Center aligned video classic editor preview

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

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.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

18 commentiLascia una risposta

  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!

      Admin

    • WPBeginner Support

      You’re welcome!

      Admin

  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.

      Admin

  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.

      Admin

  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.

      Admin

  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!!

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.