¿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 cómo agregar un borde alrededor de los videos oEmbed en WordPress.

Tutorial en video

Suscríbete a

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

Agregar videos de marco flotante alrededor de la frontera 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í:

<iframe width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

Puede agregar un borde a su alrededor agregando 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>

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, así:

<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, 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:

<iframe class="frame-border" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

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

<span class="frame-border">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

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 . También puedes encontrarnos en Twitter y Facebook.

.

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *