¿Desea agregar un borde iframe alrededor de la inserción de su 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 una inserción de video y cómo agregar un borde alrededor de videos oEmbed en WordPress.
Videotutorial
Si no le gusta el video o necesita más instrucciones, continúe leyendo.
Agregar borde alrededor de videos 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 inserción de iframe típico debería verse así:
<iframe width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>
Puede agregar un borde a su alrededor 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 cambie el ancho del borde, así como el color, y listo.
Si bien funciona agregar un borde iframe, en realidad hay una mejor manera de agregar un borde alrededor de los videos en WordPress. Eso es usando oEmbed.
Agregar borde alrededor de videos oEmbed en WordPress
WordPress viene con soporte incorporado oEmbed. Básicamente, WordPress le permite pegar el enlace del video y obtendrá automáticamente 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:
<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>
Si desea agregar un 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 {
border:3px solid #EEE;
}
Ahora puede usar la clase CSS en su código de inserción de iframe de esta manera:
<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 las URL de tus videos 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 los temas más tarde, puedes cambiar fácilmente los colores con un clic en lugar de regresar y editar cada video individualmente.
Esperamos que este artículo lo 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.
.