Cómo agregar un borde de iframe alrededor de un video incrustado

¿Quieres agregar un borde iframe alrededor de tu video incrustado? Recientemente, un usuario nos pidió una forma de agregar un borde alrededor de sus videos en WordPress. Dado que puede usar iframe y oEmbed para agregar videos en WordPress, le mostraremos cómo agregar un borde iframe alrededor de un video incrustado, así como también cómo agregar un borde alrededor de los videos oEmbed en WordPress.

Borde IFRAME alrededor de los videos de WordPress

Tutorial en video

Suscríbete a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

Agregar videos de borde alrededor de iframe en WordPress

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

Puede agregar un borde a su alrededor agregando un estilo en línea al código de esta manera:

Un video de iframe incrustado con un borde alrededor

Simplemente cambie el ancho del borde y 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 mediante el uso de oEmbed.

Agregar borde alrededor de videos oEmbed en WordPress

WordPress viene con soporte integrado para oEmbed. Básicamente, WordPress le 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 sabe cómo agregar un video con oEmbed, así es como puede agregar un borde alrededor de los videos oEmbed en WordPress.

Al agregar un video usando oEmbed, simplemente envuelva la URL en la etiqueta span con parámetros de estilo en línea, como este:

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

Si desea agregar un mismo borde alrededor de todos los iframes de video, entonces sería mejor agregar una clase CSS a la hoja de estilo de su tema.

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

Ahora puede usar la clase CSS en su código de incrustación de iframe como este:

También puede usar la misma clase CSS en la etiqueta span alrededor de las URL de sus videos oEmbed, así:

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

El beneficio de usar una sola clase de CSS es que si cambia los temas más tarde, puede cambiar fácilmente los colores con un clic en lugar de volver atrás y editar cada video individualmente.

Esperamos que este artículo le haya ayudado a agregar un borde iframe alrededor de un video incrustado en WordPress. Es posible que también desee ver estos 9 consejos útiles de YouTube para darle vida a su sitio de WordPress con videos.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Publicaciones relacionadas

Botón volver arriba