Terug naar overzicht

Wat is iFrame

Stel, je wilt een YouTube-video, een Google Maps-kaart of een extern formulier op je website tonen, zonder zelf alles te bouwen. Dan kom je al snel uit bij een iFrame. Met een iFrame kun je eenvoudig inhoud van een andere website insluiten in je eigen pagina.

Wat is een iFrame?

Een iFrame (voluit Inline Frame) is een HTML-element waarmee je een stukje van een andere webpagina in je eigen website plaatst. Je laadt als het ware een kleine “vensterversie” van een externe site binnen jouw pagina.

Dat kan gaan om een video, een kaart, een formulier of zelfs een complete website. De inhoud zelf blijft technisch gezien op de server van de externe partij staan, maar wordt in jouw pagina weergegeven.

Hoe werkt een iFrame in de praktijk?

Een iFrame voeg je toe in de HTML-code van je pagina. Het belangrijkste onderdeel daarbij is de src-eigenschap: daarin zet je de URL van de pagina of het element dat je wilt insluiten.

Een eenvoudige iFrame ziet er bijvoorbeeld zo uit:

<iframe src="URL-van-de-externe-pagina" width="600" height="400"></iframe>

Met de eigenschappen width (breedte) en height (hoogte) bepaal je hoe groot het venster op de pagina wordt. In WordPress kun je deze HTML bijvoorbeeld plakken in een “Aangepaste HTML”-blok in de editor.

Een iFrame gebruiken in WordPress

Werk je met WordPress, dan hoef je geen ontwikkelaar te zijn om een iFrame te plaatsen. In de block editor voeg je een nieuw blok toe en kies je voor “Aangepaste HTML”.

In dat blok plak je de iFrame-code, bijvoorbeeld de embed-code van YouTube of Google Maps. Daarna kun je in de preview controleren of het venster goed wordt weergegeven. Als het nodig is, pas je de breedte en hoogte aan tot het mooi in je lay-out past.

Waarvoor kun je een iFrame gebruiken?

Met een iFrame kun je allerlei soorten externe inhoud tonen op je website. Enkele veelgebruikte voorbeelden zijn:

  • YouTube- of Vimeo-video’s
  • Google Maps-kaarten (bijvoorbeeld een route naar je bedrijf)
  • Externe formulieren, zoals enquêtes of inschrijfformulieren
  • Social media-feeds of widgets

Het voordeel is dat je de functionaliteit van een andere dienst benut, zonder dat je die zelf hoeft te programmeren. De aanbieder van de externe inhoud zorgt meestal voor de techniek en het onderhoud.

Een iFrame voor een volledige website

Technisch gezien kun je met een iFrame ook een volledige website van iemand anders inladen binnen jouw site. De code lijkt dan op het eerdere voorbeeld, alleen vul je de URL van die site in bij src.

In de praktijk is dit niet altijd verstandig. Veel websites staan dit niet toe vanwege veiligheidsredenen. Daarnaast kan het voor bezoekers verwarrend zijn als ze binnen jouw site ineens een andere site in een kader zien, met een andere huisstijl of navigatie.

Voordelen van een iFrame

Een iFrame heeft verschillende voordelen, vooral op het gebied van gemak en snelheid van implementatie.

Je kunt snel externe functies toevoegen, bijvoorbeeld een video of kaart, zonder complexe integraties. De externe partij beheert de inhoud en zorgt voor updates, terwijl jouw pagina gewoon de nieuwste versie laat zien. Dat maakt een iFrame aantrekkelijk als je weinig technische kennis hebt, of als je functionaliteit van een grote dienst (zoals YouTube of Google Maps) wilt gebruiken.

Nadelen en beperkingen van iFrames

Naast voordelen heeft een iFrame ook duidelijke nadelen. Het is goed om die af te wegen voordat je besluit om ze op grote schaal te gebruiken.

Een eerste beperking is dat sommige browsers, beveiligingsinstellingen of adblockers inline frames (deels) kunnen blokkeren. Denk bijvoorbeeld aan een advertentie-iframe of een trackingwidget. In dat geval ziet de bezoeker een leeg vlak of helemaal niets.

Daarnaast kunnen veel Inline Frames op één pagina de laadtijd vertragen. Elke inline frame moet namelijk apart geladen worden, vaak vanaf een andere server. Zeker op mobiele apparaten kan dat merkbaar zijn.

Veiligheid en privacy rond iFrames

Bij het gebruik van een iFrame speelt ook veiligheid en privacy een rol. De externe partij die je insluit, kan soms cookies plaatsen of scripts uitvoeren binnen het venster.

Veel websites beschermen zichzelf door het insluiten via een inline frames te beperken. Dat doen ze met speciale beveiligingsinstellingen op de server. Daardoor kan het gebeuren dat een iFrame helemaal niet laadt, ook al heb je de code technisch goed toegevoegd.

Als je met privacy-gevoelige gegevens werkt of moet voldoen aan strenge regels (zoals de AVG), is het verstandig om goed na te denken over welke externe partijen je via inline frames insluit. Dit artikel is geen juridisch advies; bij twijfel is het slim om een specialist te raadplegen.

Wanneer wel en niet kiezen voor een iFrame?

Een iFrame is vooral handig als je snel betrouwbare inhoud van een bekende externe dienst wilt tonen, zoals een video, kaart of formulier. De implementatie is eenvoudig en vaak levert de aanbieder zelf kant-en-klare embed-code.

Minder geschikt is een iFrame als de inhoud heel belangrijk is voor de kern van je website, of als je veel controle wilt over vormgeving, snelheid en toegankelijkheid. In zulke gevallen kan een directe integratie (bijvoorbeeld via een plug-in of API) op de lange termijn beter zijn, al vraagt dat meer technische kennis.