Come aggiungere un bordo iframe attorno a un video incorporato

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

Tutorial video

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

Aggiungere un bordo attorno ai video iframe in WordPress

La prima cosa da fare è aprire un post o una pagina contenente il codice di incorporamento del tuo video iframe. Un tipico codice di incorporamento iframe dovrebbe apparire così:

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

Puoi aggiungere un bordo attorno ad esso aggiungendo uno stile inline al codice in questo modo:

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

Cambia semplicemente la larghezza del bordo e il colore, e hai finito.

Sebbene l'aggiunta di un bordo iframe funzioni, esiste in realtà un modo migliore per aggiungere un bordo attorno ai video in WordPress. Questo è l'uso di oEmbed.

Aggiungere un bordo attorno ai video oEmbed in WordPress

WordPress include il supporto oEmbed integrato. In pratica, WordPress ti permette di incollare il link del video e otterrà automaticamente il codice di incorporamento per essi. Ora, questo funziona solo per i siti abilitati oEmbed 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 attorno ai video oEmbed in WordPress.

Quando aggiungi un video usando oEmbed, semplicemente racchiudi l'URL in un tag span con parametri di stile inline, in questo modo:

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

Se vuoi aggiungere un bordo uguale attorno a tutti gli iframe 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 di incorporamento iframe in questo modo:

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

Puoi anche usare la stessa classe CSS nel tag span attorno ai tuoi URL video oEmbed, in questo modo:

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

Il vantaggio di usare una singola classe CSS è che se cambi tema in seguito, puoi facilmente cambiare i colori con un clic invece di tornare indietro e modificare ogni video individualmente.

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 suggerimenti di YouTube per ravvivare il tuo sito WordPress con i video.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.