Wat het is
Een iframe is een manier om de inhoud van de ene webpagina in een andere in te sluiten — het maakt het mogelijk om een YouTube-video, een Google Maps-kaart, of een widget van derden rechtstreeks op je eigen pagina te plaatsen zonder die functionaliteit zelf te bouwen. De meeste embedcodes die je van deze diensten kopieert en plakt, komen al met een vaste pixelbreedte en -hoogte, afgestemd op een typisch desktopscherm.
Deze check kijkt of ingesloten iframes op een pagina zijn ingesteld om mee te schalen met het scherm ("responsief"), of dat ze op die originele vaste grootte blijven staan, ongeacht de daadwerkelijke schermbreedte van de bezoeker.
Waarom het belangrijk is
Een kaart of video die op een vaste grootte van 560×315 pixels is ingesloten, werkt bijvoorbeeld prima op een desktopscherm, maar kan gemakkelijk breder zijn dan een heel telefoonscherm, waardoor hetzelfde soort horizontaal scrollen wordt afgedwongen of het element visueel volledig wordt afgesneden. Dit is een veelvoorkomend, makkelijk over het hoofd te zien probleem juist omdat de embedcode meestal precies zo voorgeschreven door het platform (YouTube, Google Maps) wordt geplakt, zonder duidelijke aanwijzing dat verdere aanpassing voor mobiel gebruik nodig is.
Een kapotte embed valt ook onevenredig meer op dan een klein tekstprobleem — een kaart die half is afgesneden of een videospeler die over het scherm heen loopt, is meteen visueel duidelijk voor elke bezoeker die op zijn telefoon naar dat deel van de pagina scrolt.
Hoe je het oplost
- Identificeer elke ingesloten iframe op je site — meestal video's, kaarten, of widgets van derden — en controleer hoe ze worden weergegeven op een echte telefoon.
- Wikkel de iframe in een container die zo is opgemaakt dat de breedte als percentage wordt geregeld, waarbij de iframe zelf is ingesteld om die container te vullen (
width: 100%) in plaats van de originele vaste pixelbreedte te gebruiken. - Voor YouTube-embeds specifiek is een gangbare aanpak een wrapper met een vaste beeldverhouding (zoals 16:9) die de video proportioneel schaalt op elke schermbreedte — er zijn veel gratis codefragmenten beschikbaar voor precies dit patroon.
- Als je een websitebouwer gebruikt, controleer dan of hij een ingebouwd "embed"- of "video"-blok heeft in plaats van ruwe iframe-code — deze zijn meestal standaard al responsief.
- Controleer de embed daarna opnieuw op een telefoon om te bevestigen dat hij correct schaalt in plaats van over te lopen.