¿Desea agregar un borde iframe alrededor de su inserción de 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 de iframe alrededor de un video incrustado, así como también cómo agregar un borde alrededor de los videos de OEmbed en WordPress.
Adición de bordes alrededor de los videos iframe en WordPress
Lo primero que debe hacer es abrir una publicación o una página que contenga su código incrustado de video iframe. Un código de inserción de iframe típico debería tener un aspecto similar a este:
Puede agregar un borde alrededor agregando estilo en línea al código como este:
Simplemente cambie el ancho del borde y el color, y listo.
Al agregar un borde 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.
Adición de borde alrededor de videos insertados en WordPress
WordPress viene con soporte incorporado de oEmbed. 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 los sitios habilitados para OEmbed como YouTube, Vimeo, DailyMotion, Hulu, etc. (Ver: cómo agregar fácilmente videos en WordPress usando oEmbed)
Ahora que ya sabe cómo agregar un video con OEmbed, aquí le mostramos cómo puede agregar un borde alrededor de los videos de OEmbed en WordPress.
Al agregar un video usando oEmbed, simplemente ajuste la URL en la etiqueta span con los 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 de CSS a la hoja de estilo de su tema.
.Frontera del marco {
borde: 3px sólido #EEE;
}
Ahora puede usar la clase CSS en su código incrustado de iframe así:
También puede usar la misma clase de CSS en la etiqueta span de sus URL de video oEmbed, como esta:
http://www.youtube.com/watch?v=qzOOy1tWBCg
El beneficio de usar una única clase de CSS es que si cambia los temas más adelante, puede cambiar fácilmente los colores con un clic, retroceder y editar cada video individualmente.
Esperamos que este artículo lo ayude 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.
