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:
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.
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
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
Personas a las que les gusta esto
Delete Comment
This post will be deleted permanently. Are you sure?
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:
HTML
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