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

Modificado el Lun., 11 Mar. a las 4:46 P. M.

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.


¿Le fue útil este artículo?

¡Qué bueno!

Gracias por sus comentarios

¡Sentimos mucho no haber sido de ayuda!

Gracias por sus comentarios

¡Díganos cómo podemos mejorar este artículo!

Seleccione al menos una de las razones
La verificación de CAPTCHA es obligatoria.

Comentarios enviados

Agradecemos su iniciativa, e intentaremos corregir el artículo