Qué es
Un iframe es una forma de incrustar el contenido de una página web dentro de otra — es lo que hace posible colocar un vídeo de YouTube, un mapa de Google Maps o un widget de terceros directamente en tu propia página sin tener que construir tú esa funcionalidad. La mayoría de los códigos de inserción que copias y pegas de estos servicios ya vienen con un ancho y un alto fijos en píxeles, dimensionados para una pantalla de escritorio típica.
Esta comprobación examina si los iframes incrustados en una página están configurados para redimensionarse junto con la pantalla ("adaptables" o "responsive"), o si se dejan en ese tamaño fijo original sin importar el ancho real de la pantalla del visitante.
En qué afecta
Un mapa o vídeo incrustado con un tamaño fijo de, por ejemplo, 560×315 píxeles funciona bien en una pantalla de escritorio pero fácilmente puede ser más ancho que toda la pantalla de un móvil, provocando el mismo tipo de desplazamiento horizontal o quedando visualmente cortado del todo. Este es un problema habitual y fácil de pasar por alto precisamente porque el código de inserción suele venir ya escrito por la plataforma (YouTube, Google Maps) tal cual se pega, sin ninguna indicación evidente de que necesite algún ajuste adicional para uso móvil.
Un elemento incrustado roto también resulta desproporcionadamente llamativo comparado con un pequeño problema de texto — un mapa cortado por la mitad o un reproductor de vídeo que se desborda de la pantalla es inmediata y visualmente obvio para cualquier visitante que llegue a esa parte de la página desde su móvil.
Cómo solucionarlo
- Identifica cada iframe incrustado en tu web — habitualmente vídeos, mapas o widgets de terceros — y comprueba cómo se muestran en un móvil real.
- Envuelve el iframe en un contenedor con estilo para controlar su ancho como un porcentaje, con el propio iframe configurado para llenar ese contenedor (
width: 100%) en lugar de usar su ancho fijo original en píxeles. - Para las inserciones de YouTube en particular, un enfoque habitual es un contenedor con una proporción de aspecto fija (como 16:9) que escala el vídeo de forma proporcional a cualquier ancho de pantalla — hay muchos fragmentos de código gratuitos disponibles para este patrón exacto.
- Si usas un creador de webs, comprueba si tiene un bloque integrado de "incrustar" o "vídeo" en lugar de código iframe en bruto — estos suelen ser adaptables por defecto.
- Vuelve a comprobar el elemento incrustado en un móvil después para confirmar que se redimensiona correctamente en lugar de desbordarse.