#aWPaDay: Centrare il video youtube nel contenuto

Utilizzi i video youtube nei tuoi articoli ma non sono centrati?

Stai impazzendo per capire come centrarli nel contenuto?

Allora vediamo insieme come fare.

Introduzione

WordPress, nelle ultime versioni, ci mette a disposizione la possibilità di incorporare un video youtube semplicemente incollando nell’editor l’url del video da visualizzare. Quindi incollando qui l’url del video youtu.be/O6NRLYUThrY visualizzeremo questo:

Come potete notare, il video viene visualizzato ma non è allineato al centro e in questo caso ha una dimensione di 500×281.

Come possiamo fare?

Possiamo muoverci in 2 modi,

1. Inserire il video nelle dimensioni del contenuto così occuperà il 100% della larghezza
2. Utilizzare gli stili per centrare il video

1.Vediamo come inserire un video youtube al 100% della sua larghezza.

Per prima cosa vediamo quanto è la width del contenuto poi, andiamo su youtube,  clicchiamo su condividi e poi su codice da incorporare. Su dimensioni video selezioniamo “dimensioni personalizzate” e inseriamo la larghezza del nostro contenuto.

 

copiamo il codice che youtube ci visualizza, incolliamolo nell’editor di wordpress e vedremo che occuperà il 100% della larghezza.

Altrimenti, per velocizzare la cosa, senza ogni volta selezionare su youtube il codice personalizzato, inseriamo nel tema attivo questo stile per forzare l’iframe al 100% di larghezza

.single iframe{width: 100%;}

2.Utilizzare gli stili per centrare il video

Se dobbiamo mantenere le dimensioni originali del video, l’unico modo per centrarlo è utilizzando il codice seguente per centrare l’iframe

<div style="text-align:center;">
youtu.be/O6NRLYUThrY (abbiamo rimosso l'http per non farlo convertire)
 </div>

e questo è l’effetto che avremo

ma per velocizzare la cosa, senza ogni volta inserire il codice nell’editor, la soluzione è inserire questo stile nel file style.css del tema attivo

.single iframe{disaply:block;margin:auto;}

questo farà si che gli iframe automaticamente saranno centrati in base al div contenitore.

E questo è tutto. Speriamo possa esserti utile e in caso di dubbi non esitare a lasciarci un commento…

Al prossimo WPaDay…

DETTAGLI

Livello: medio

Compatibilità: testato su WP versione 3.9.1