Come aggiungere un bordo iframe intorno a un video incorporato

Volete aggiungere un bordo iframe intorno al vostro video embed? Recentemente un utente ci ha chiesto un modo per aggiungere un bordo intorno ai propri video in WordPress. Poiché è possibile utilizzare sia iframe che oEmbed per aggiungere video in WordPress, vi mostreremo come aggiungere un bordo iframe intorno a un video embed e come aggiungere un bordo intorno ai video oEmbed in WordPress.

Tutorial video

Se il video non vi piace o avete bisogno di ulteriori istruzioni, continuate a leggere.

Aggiungere un bordo intorno ai video iframe in WordPress

La prima cosa da fare è aprire un post o una pagina contenente il codice di incorporamento del video iframe. Un tipico codice di incorporamento iframe dovrebbe avere un aspetto simile a questo:

<iframe width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

È possibile aggiungere un bordo intorno ad esso aggiungendo uno stile in linea al codice come questo:

<iframe style="border: 3px solid #EEE;" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

È sufficiente modificare la larghezza del bordo e il colore e il gioco è fatto.

Sebbene l’aggiunta di un bordo iframe funzioni, esiste un modo migliore per aggiungere un bordo intorno ai video in WordPress. Si tratta di utilizzare oEmbed.

Aggiunta di un bordo intorno ai video con oEmbed in WordPress

WordPress è dotato di un supporto integrato per oEmbed. In pratica, WordPress consente di incollare il link del video e di ottenere automaticamente il codice di incorporamento. Questo funziona solo per i siti abilitati a oEmbed, come YouTube, Vimeo, DailyMotion, Hulu, ecc. (vedi: come aggiungere facilmente video in WordPress usando oEmbed).

Ora che sapete come aggiungere un video con oEmbed, ecco come aggiungere un bordo intorno ai video oEmbed in WordPress.

Quando si aggiunge un video con oEmbed, è sufficiente avvolgere l’URL in un tag span con parametri di stile inline, come questo:

<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

Se si desidera aggiungere lo stesso bordo a tutti gli iframe video, è meglio aggiungere una classe CSS al foglio di stile del tema.

.frame-border { 
border:3px solid #EEE; 
}

Ora è possibile utilizzare la classe CSS nel codice di incorporamento dell’iframe in questo modo:

<iframe class="frame-border" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

È inoltre possibile utilizzare la stessa classe CSS nel tag span intorno agli URL dei video oEmbed, in questo modo:

<span class="frame-border">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

Il vantaggio di usare un’unica classe CSS è che se si cambia tema in un secondo momento, si possono facilmente cambiare i colori con un solo clic, invece di tornare indietro e modificare ogni singolo video.

Speriamo che questo articolo vi abbia aiutato ad aggiungere un bordo iframe intorno a un video incorporato in WordPress. Potreste anche voler vedere questi 9 utili consigli di YouTube per arricchire il vostro sito WordPress con i video.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.