iFrames: ajusta el ancho para sitios responsivos
¿Qué es un iframe?
iFrame es corto para "inline frames" que son usado para incrustar otro documento HTML dentro de un marco. Usualmente son útiles para poner videos o calendarios de otro sitio web directamente en tu página.
Por ejemplo: si haces click en "compartir" debajo de un video de YouTube puedes seleccionar "incrustar" para sacar el iframe del video:
Aquí hay un ejemplo con Google Calendars:
Puedes revisar sobre los Códigos para insertar en nuestra sección de Código Incrustado
El problema con tamaños fijos
Los iFrames son muy comunes y pueden ser usados de varias maneras. Desafortunadamente tienen tamaños fijos. Esto significa que siempre son el mismo tamaño y nunca cambian, aunque los veas en un teléfono o cambies el tamaño de la ventana del navegador.
Esto no funciona bien en el diseño de sitio web que puede cambiar dinámicamente en respuesta a la variación de tamaños de ventana.
Considera tu dispositivo móvil, el cual tiene un tamaño de ventana de 320px. Si el ancho es de 560px, esto causará que se sobresalga más allá de la ventana. Esto significa que tienes que bajar de manera horizontal para ver el iframe entero.
Tamaños dinámicos
Para corregir este problema, el tamaño necesita ser un porcentaje basado en valor. Esto permite que el iframe cambie de tamaño a la par que él tamaño de la ventana y diseño web.
Utilizando la herramienta de "source code" de la barra del editor de texto, hemos pegado el código incrustado de un Google Calendar.
Esto resultará en un Google Calendar incrustado que llene el espacio completo.
Es posible que necesites ajustar el alto para obtener el marco (frame) al ajuste perfecto.
Es así como cualquier archivo como video, pdf o calendario incrustado se mostrará de manera apropiada en las diferentes tamaños de ventana, sin importar el dispositivo en el que este navegando el usuario.