Cómo agregar un borde iframe alrededor de la incrustación de un video

¿Quieres agregar un borde de iframe alrededor de la incrustación de tu video? Recientemente, un usuario nos preguntó cómo agregar un borde alrededor de sus videos en WordPress. Dado que puedes usar tanto iframe como oEmbed para agregar videos en WordPress, te mostraremos cómo agregar un borde de iframe alrededor de una incrustación de video, así como cómo agregar un borde alrededor de videos oEmbed en WordPress.

Tutorial en video

Si no te gusta el video o necesitas más instrucciones, sigue leyendo.

Agregar un borde alrededor de videos iframe en WordPress

Lo primero que debes hacer es abrir una publicación o página que contenga el código de incrustación de tu video iframe. Un código de incrustación iframe típico debería verse algo así:

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

Puedes agregarle un borde agregando un estilo en línea al código de esta manera:

<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.

Si bien agregar un borde de iframe funciona, en realidad hay una mejor manera de agregar un borde alrededor de los videos en WordPress. Eso es usando oEmbed.

Agregar un borde alrededor de videos oEmbed en WordPress

WordPress viene con soporte oEmbed integrado. Básicamente, WordPress te permite pegar el enlace del video y automáticamente obtendrá el código de inserción para ellos. Ahora, esto solo funciona para sitios habilitados para oEmbed como YouTube, Vimeo, DailyMotion, Hulu, etc. (Ver: cómo agregar fácilmente videos en WordPress usando oEmbed)

Ahora que sabes cómo agregar un video con oEmbed, aquí te explicamos cómo puedes agregar un borde alrededor de los videos oEmbed en WordPress.

Al agregar un video usando oEmbed, simplemente envuelve la URL en una etiqueta span con parámetros de estilo en línea, así:

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

Si deseas agregar un borde igual alrededor de todos los iframes de video, entonces sería mejor agregar una clase CSS a la hoja de estilos de tu tema.

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

Ahora puedes usar la clase CSS en tu código de inserción iframe así:

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

También puedes usar la misma clase CSS en la etiqueta span alrededor de tus URLs de video oEmbed, así:

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

El beneficio de usar una sola clase CSS es que si cambias de tema más adelante, podrás cambiar fácilmente los colores con un solo clic en lugar de tener que editar cada video individualmente.

Esperamos que este artículo te haya ayudado a agregar un borde iframe alrededor de una inserción de video en WordPress. También te pueden interesar estos 9 útiles consejos de YouTube para darle vida a tu sitio de WordPress con videos.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.