Cos'è
Un iframe è un modo di incorporare il contenuto di una pagina web dentro un'altra — è ciò che rende possibile inserire un video YouTube, una mappa Google, o un widget di terze parti direttamente sulla tua pagina senza costruire tu stesso quella funzionalità. La maggior parte dei codici di embed che copi e incolli da questi servizi arrivano già con una larghezza e altezza fisse in pixel, dimensionate per uno schermo desktop tipico.
Questo controllo verifica se gli iframe incorporati in una pagina sono configurati per ridimensionarsi insieme allo schermo ("responsive"), oppure se rimangono a quella dimensione fissa originale indipendentemente dalla larghezza reale dello schermo del visitatore.
Perché è importante
Una mappa o un video incorporati a una dimensione fissa di 560×315 pixel, per esempio, funzionano bene su uno schermo desktop ma possono facilmente essere più larghi dell'intero schermo di un telefono, forzando lo stesso tipo di scorrimento orizzontale o venendo visivamente tagliati del tutto. Questo è un problema comune e facile da trascurare proprio perché il codice di embed di solito arriva pre-scritto dalla piattaforma (YouTube, Google Maps) esattamente come incollato, senza indicazione ovvia che necessiti di ulteriori aggiustamenti per l'uso mobile.
Un embed rotto è anche notevolmente più evidente rispetto a un piccolo problema di testo — una mappa tagliata a metà o un player video che trabocca dallo schermo è immediatamente, visivamente ovvio per qualsiasi visitatore che scorra fino a quella parte della pagina sul proprio telefono.
Come risolverlo
- Identifica ogni iframe incorporato sul tuo sito — comunemente video, mappe o widget di terze parti — e controlla come vengono visualizzati su un telefono reale.
- Avvolgi l'iframe in un contenitore stilizzato per controllare la sua larghezza come percentuale, con l'iframe stesso impostato per riempire quel contenitore (
width: 100%) invece di usare la sua larghezza fissa originale in pixel. - Per gli embed YouTube in particolare, un approccio comune è un wrapper con un rapporto d'aspetto fisso (come 16:9) che scala il video proporzionalmente a qualsiasi larghezza dello schermo — sono disponibili molti frammenti di codice gratuiti per questo esatto pattern.
- Se usi un website builder, controlla se ha un blocco integrato "embed" o "video" invece di codice iframe grezzo — questi sono di solito già responsive per default.
- Ricontrolla l'embed su un telefono in seguito per confermare che si ridimensioni correttamente invece di traboccare.