Come aggiungere un bordo iframe attorno a un video Incorpora

Vuoi aggiungere un bordo iframe al tuo video incorporato? Recentemente un utente ci ha chiesto un modo per aggiungere un bordo attorno ai suoi video in WordPress. Poiché puoi utilizzare sia iframe che oEmbed per aggiungere video in WordPress, ti mostreremo come aggiungere un bordo iframe attorno a un video embed e come aggiungere un bordo intorno a video ombreggiati in WordPress.

Video Tutorial

Se il video non ti piace o hai bisogno di ulteriori istruzioni, continua a leggere.

Aggiunta di bordi attorno ai video iframe in WordPress

La prima cosa che devi fare è aprire un post o una pagina contenente il tuo codice di incorporamento video iframe. Un tipico codice di incorporamento di iframe dovrebbe essere simile a questo:

Puoi aggiungere un bordo attorno ad esso aggiungendo uno stile in linea al codice come questo:

Basta cambiare la larghezza del bordo e il colore, e il gioco è fatto.

Mentre l'aggiunta di un bordo iframe funziona, c'è in realtà un modo migliore per aggiungere un bordo attorno ai video in WordPress. È usando oEmbed.

Aggiunta di bordi attorno a Video ombreggiati in WordPress

WordPress viene fornito con il supporto oEmbed integrato. Fondamentalmente WordPress ti permette di incollare il link del video, e otterrà automaticamente il codice di incorporamento per loro. Ora funziona solo su siti abilitati oMed come YouTube, Vimeo, DailyMotion, Hulu, ecc. (Vedi: come aggiungere facilmente video in WordPress usando oEmbed)

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

Quando aggiungi un video usando oEmbed, avvolgi semplicemente l'URL nel tag span con i parametri di stile in linea, come questo:

http://www.youtube.com/watch?v=qzOOy1tWBCg

Se vuoi aggiungere uno stesso bordo attorno a tutti gli iframe del video, allora sarebbe meglio aggiungere una classe CSS al foglio di stile del tuo tema.

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

Ora puoi usare la classe CSS nel tuo codice embed iframe come questo:

Puoi anche utilizzare la stessa classe CSS nel tag span intorno ai tuoi URL video ombreggiati, in questo modo:

http://www.youtube.com/watch?v=qzOOy1tWBCg

Il vantaggio dell'utilizzo di una singola classe CSS è che se cambi temi successivamente, puoi facilmente cambiare i colori con un clic o tornare indietro e modificare ogni video singolarmente.

Speriamo che questo articolo ti abbia aiutato ad aggiungere un bordo iframe attorno a un video incorporato in WordPress. Potresti anche voler vedere questi 9 utili consigli di YouTube per rendere più piccante il tuo sito WordPress con i video.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.