¿Desea añadir un borde de iframe alrededor de su incrustación de vídeo? Recientemente un usuario nos pidió una forma de añadir un borde alrededor de sus vídeos en WordPress. Dado que puede usar tanto iframe como oEmbed para añadir vídeos en WordPress, le mostraremos cómo añadir un borde iframe alrededor de una incrustación de vídeo, así como cómo añadir un borde alrededor de los vídeos oEmbed en WordPress.
Video Tutorial
Suscribirse a AprenderWP
Si no te gusta el video o necesitas más instrucciones, entonces continúa leyendo.
Adición de vídeos Border Around iframe en WordPress
Lo primero que tiene que hacer es abrir un post o una página que contenga el código de incrustación de vídeo iframe. Un código típico de incrustación de iframe debería ser algo así:
Puede añadir un borde alrededor de él añadiendo estilo en línea al código de esta manera:
Simplemente cambie el ancho del borde así como el color, y listo.
Mientras que la adición de un borde iframe funciona, en realidad hay una mejor manera de añadir un borde alrededor de los vídeos en WordPress. Eso es usando oEmbed.
Adición de bordes alrededor de los vídeos de oEmbed en WordPress
WordPress viene con soporte integrado de oEmbed. Básicamente WordPress te permite pegar el enlace del vídeo, y automáticamente obtendrá el código de incrustación para ellos. Ahora esto sólo funciona para sitios habilitados para oEmbed como YouTube, Vimeo, DailyMotion, Hulu, etc. (Ver: cómo añadir fácilmente vídeos en WordPress usando oEmbed)
Ahora que sabes cómo añadir un vídeo con oEmbed, aquí está cómo puedes añadir un borde alrededor de los vídeos de oEmbed en WordPress.
Cuando añada un vídeo utilizando oEmbed, simplemente ajuste la etiqueta URL en span con parámetros de estilo inline, como este:
Si desea añadir un mismo borde alrededor de todos los iframes de vídeo, entonces lo mejor sería añadir una clase CSS a la hoja de estilos de su tema.
123.frame-border { border:3pxsolid#EEE; }
Ahora puedes usar la clase CSS en tu iframe para incrustar código de esta manera:
También puede utilizar la misma clase CSS en la etiqueta span alrededor de las URLs de sus vídeos oEmbed, de esta manera:
La ventaja de utilizar una única clase CSS es que si cambia los temas más tarde, puede cambiar fácilmente los colores con un solo clic en lugar de volver atrás y editar cada vídeo individualmente.
Esperamos que este artículo le haya ayudado a añadir un borde iframe alrededor de un vídeo incrustado en WordPress. También puedes ver estos 9 consejos útiles de YouTube para darle sabor a tu sitio de WordPress con videos.
Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.
Deja una respuesta