Bij het integreren van een iFrame op een website, kunnen onverwachte schaalproblemen optreden wanneer percentages worden gebruikt voor de hoogte en breedte. Een veelvoorkomend voorbeeld:
Wat gaat hier mis?
De attributen height="500%" en width="640%" maken het iframe respectievelijk vijf keer zo hoog en meer dan zes keer zo breed als het omringende element. Percentages in HTML en CSS worden relatief berekend ten opzichte van de oudercontainer. Als die container een beperkte grootte heeft, wordt het iframe gigantisch opgeblazen, wat leidt tot:
-
Scrollproblemen
-
Onverwachte uitlijning
-
Verlies van responsiviteit
De Oplossing: Vaste of Responsieve iFrame
Kies in plaats daarvan voor een vaste hoogte en een responsieve breedte, zodat het iframe zich netjes aanpast aan het schermformaat:
Uitleg bij de verbeterde versie:
-
width="100%": Past zich aan de breedte van het omringende element aan, ideaal voor responsieve ontwerpen. -
height="600px": Bepaalt een vaste hoogte zodat de content binnen het iframe correct wordt weergegeven zonder onnodig veel ruimte in te nemen. -
style="border: none;": Verwijdert de rand voor een schonere uitstraling. -
frameborder="0": Verouderd, maar zorgt ervoor dat oudere browsers ook geen rand tonen.
Extra Tips
- Gebruik CSS voor verdere controle, bijvoorbeeld met media queries voor aangepaste hoogtes op mobiel.
- Wil je een volledige paginaweergave, gebruik dan
height: 100vh(viewport height) in CSS. - Vergeet niet dat sommige externe websites beveiligingsinstellingen hebben (bijv.
X-Frame-Options) die voorkomen dat ze in een iframe worden geladen.