Cómo Hacer que un Script o iFrame sea Responsivo en Medios CMS

Publicado 4 meses hace por Florencia Algabo

Publicar un tema
  • El tema está bloqueado
Florencia Algabo
Florencia Algabo Administrador

Agregar iFrames o Scripts a tu sitio es una excelente manera de enriquecer tus contenidos. Sin embargo, puede ser un desafío asegurarse de que se adapten correctamente a diferentes tipos de pantallas y dispositivos. A continuación, te muestro cómo solucionar este problema de una manera sencilla y efectiva.


Prepara tu Contenedor Responsivo

Antes de insertar tu Script o iFrame, necesitas un contenedor que se ajuste automáticamente a diferentes tamaños de pantalla. Para hacerlo, sigue estos pasos:


  1. Accede a tu artículo o espacio donde quieras insertar el código: En Medios CMS, ve a la página, artículo o bloque HTML donde deseas agregar el contenido y utiliza la opción de "Insertar/editar código" ubicado en el panel de herramientas del sistema de redacción.

  2. Agrega el Contenedor: Copia y pega el siguiente código en tu editor:

    <divstyle="position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;"><!-- Tu Script o iFrame va aquí --></div>

    HTML

  3. Inserta tu Script o iFrame: Ahora, inserta tu código dentro del contenedor. Asegúrate de que tu Script o iFrame esté dentro de las etiquetas `<div>` que acabas de agregar. Debería verse así:

    <divstyle="position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;">     AQUÍ VA TU SCRIPT O IFRAME </div>

    HTML


Consejos y Mejores Prácticas

Prueba en Diferentes Dispositivos: Después de publicar, verifica cómo se ve el contenido en varios dispositivos para asegurarte de que se ajusta correctamente.

Ajusta el Porcentaje de Padding: El valor `padding-bottom: 56.25%` está diseñado para una relación de aspecto 16:9. Si tu contenido tiene diferentes dimensiones, ajusta este porcentaje para mantener la proporción correcta.

0 Votos


0 Comentarios