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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Nicola says
There seems to be extra space at the bottom so it doesn’t fit exactly, how can I fix this please.
thanks
WPBeginner Support says
If you’ve set the width and height you would likely need to change the height based on the dimensions of your video.
Admin
Thomas says
The frame covers the video controls, how do i stop this happening? Cheers.
tom says
I have got the border but can’t change the colour? How do I do this?
eric greenspan says
Change the hex number Tom. For Dodger blue use: #1E90FF in place of #EEE. You can find hex colors here.