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

¿Desea agregar un borde de marco flotante alrededor de su video incrustado? Recientemente, un usuario nos solicitó una manera de agregar un borde alrededor de sus videos en WordPress. Ya que puede usar tanto iframe como 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 videos incrustados en WordPress.

Video Tutorial

Si no te gusta el video o necesitas más instrucciones, continúa leyendo.

Agregar bordes alrededor de los videos de iframe en WordPress

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

Puede agregar un borde alrededor de él agregando un estilo en línea al código como este:

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

Si bien la adición de 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.

Agregando Border Around oEmbed Videos en WordPress

WordPress viene con soporte incorporado 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. (Vea: cómo agregar fácilmente videos en WordPress usando oEmbed)

Ahora que sabe cómo agregar un video con oEmbed, aquí es cómo puede agregar un borde alrededor de los videos oEmbed en WordPress.

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

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 estilos de su tema.

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

Ahora puedes usar la clase CSS en tu código de incrustación de iframe de esta manera:

También puede usar la misma clase de CSS en la etiqueta de separación alrededor de las URL de sus videos incorporados, como esto:

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

La ventaja de usar una única clase de CSS es que si cambia los temas más adelante, puede cambiar fácilmente los colores con un solo clic o retroceder y editar cada video individualmente..

Esperamos que este artículo te haya ayudado a agregar un borde de iframe alrededor de un video incrustado en WordPress. También puede querer ver estos 9 consejos útiles de YouTube para animar su sitio de WordPress con videos.

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..