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

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:
   
   

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

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

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

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.

¡Eso es todo! Siguiendo estos sencillos pasos, puedes hacer que cualquier Script o iFrame sea responsivo en tu sitio de Medios CMS.