Cómo añadir un borde iframe alrededor de un vídeo incrustado

¿Quieres añadir un borde iframe alrededor de tu vídeo incrustado? Recientemente un usuario nos preguntó cómo añadir un borde alrededor de sus vídeos en WordPress. Dado que puede utilizar tanto iframe como oEmbed para añadir vídeos en WordPress, le mostraremos cómo añadir un borde iframe alrededor de un vídeo incrustado, así como la forma de añadir un borde alrededor de los vídeos oEmbed en WordPress.

Tutorial de vídeo

Si no te gusta el vídeo o necesitas más instrucciones, sigue leyendo.

Cómo añadir un borde alrededor de los vídeos iframe en WordPress

Lo primero que tienes que hacer es abrir una entrada o página que contenga el código para incrustar el vídeo iframe. Un código típico para incrustar un iframe debería tener este aspecto:

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

Puedes añadir un borde a su alrededor añadiendo un estilo integrado al código, como se muestra a continuación:

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

Simplemente cambia el ancho del borde así como el color, y listo.

Aunque añadir un borde iframe funciona, hay una forma mejor de añadir un borde alrededor de los vídeos en WordPress. Eso es mediante el uso de oEmbed.

Añadir un borde alrededor de los vídeos oEmbed en WordPress

WordPress es compatible con oEmbed. Básicamente WordPress le permite pegar el enlace del vídeo, y obtendrá automáticamente el código de incrustar para ellos. Ahora bien, esto solo funciona para sitios activados / activos para oEmbed como YouTube, Vimeo, DailyMotion, Hulu, etc. (Ver: cómo añadir vídeos fácilmente en WordPress usando oEmbed)

Ahora que ya sabes cómo añadir un vídeo con oEmbed, a continuación te explicamos cómo añadir un borde alrededor de los vídeos de oEmbed en WordPress.

Cuando añadas un vídeo usando oEmbed, simplemente envuelve la URL en una etiqueta span con parámetros de estilo integrados, como esta:

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

Si desea añadir un mismo borde alrededor de todos los iframes de vídeo, entonces lo mejor sería añadir una clase CSS a la hoja de estilos de su tema.

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

Ahora puedes usar la clase CSS en tu código para incrustar iframes de la siguiente manera:

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

También puedes utilizar la misma clase CSS en la etiqueta span alrededor de las URL de tus vídeos oEmbed, de esta forma:

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

La ventaja de usar una única clase CSS es que si cambias de tema más adelante, puedes cambiar fácilmente los colores con un clic en lugar de volver atrás y editar cada vídeo individualmente.

Esperamos que este artículo te haya ayudado a añadir un borde iframe alrededor de un vídeo incrustado en WordPress. Puede que también quieras ver estos 9 consejos útiles de YouTube para darle vida a tu sitio WordPress con vídeos.

Si te ha gustado este artículo, suscríbete a nuestro canal de YouTube para ver tutoriales en vídeo sobre WordPress. También puedes encontrarnos en Twitter y Facebook.