miércoles, junio 12, 2024
No menu items!
InicioBlogsCómo agregar un borde de iframe alrededor de un video incrustado

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

¬Ņ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 tambi√©n c√≥mo agregar un borde alrededor de los videos oEmbed en WordPress.

Tutorial en video

Suscríbete a WPBeginner

Si no le gusta el video o necesita m√°s instrucciones, contin√ļe leyendo.

Agregar videos de borde alrededor de 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 incrustació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 de esta manera:

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)

ūüĒ• Leer:  C√≥mo migrar su blog de Blogspot a WordPress, paso a paso

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:

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:

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

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 para tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Tabla de contenidos

Toggle

Recomendamos

Populares