Iframe Border Around Wordpress Videos

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

¿Quieres agregar un borde iFrame alrededor de la incrustación de tu video? 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.

Video tutorial

Suscríbase a MundoCMS Si no le gusta el video o necesita más instrucciones, siga leyendo.

Agregue un borde alrededor de los videos de iframe en WordPress

Lo primero que debe hacer es abrir una publicación o página que contenga el código de inserción para su video iframe. Un código de inserció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 como este:

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. Esto está usando oEmbed.

Agregue un borde alrededor de los 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 solo funciona para sitios compatibles con oEmbed como YouTube, Vimeo, DailyMotion, Hulu, etc. (ver: cómo agregar videos fácilmente en WordPress usando oEmbed) Ahora que sabe cómo agregar videos con oEmbed, aquí le mostramos cómo 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, así:
http://www.youtube.com/watch?v=qzOOy1tWBCg
Si desea agregar el mismo borde alrededor de todos los iframes de video, sería mejor agregar una clase CSS a la hoja de estilo de su tema. .frame-border {borde: 3px sólido #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
La ventaja de usar una sola clase de CSS es que si cambia el tema 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 ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply