Wat is een iFrame? Inhoud insluiten met HTML iFrames

Belangrijkste hoogtepunten

• Leer de basisprincipes van de tag
• Bekijk hoe iFrames YouTube-video’s, kaarten, formulieren en tools direct in je website integreren.
• Volg de best practices voor het insluiten met iFrames, inclusief responsief ontwerp en beveiligingstips.
• Begrijp wat deze attributen bepalen en hoe ze de prestaties, beveiliging en gebruikerservaring beïnvloeden.
• Bekijk hoe wij, bij Bluehost, het eenvoudig maken om iFrames toe te voegen met onze website builder of WordPress.

Heb je je ooit afgevraagd hoe websites YouTube-video’s, Google Maps of online formulieren weergeven zonder die inhoud zelf te hosten? Het antwoord ligt in een krachtig maar eenvoudig HTML-element: het iFrame.

Wat is een iFrame? Dit is een HTML-tag die wordt gebruikt om een andere webpagina of HTML-document direct in je eigen pagina of document op te nemen. Het is een eenvoudige manier om inhoud van derden, zoals video’s, formulieren of kaarten, in te sluiten zonder de code van de externe site aan te raken.

Als je een beginner bent, lijkt het idee van het gebruik van een iFrame misschien een beetje technisch. Maar met de juiste begeleiding is het verrassend eenvoudig te gebruiken en ongelooflijk nuttig. Of je nu YouTube-video’s wilt insluiten, kaarten wilt weergeven of widgets wilt laden, inzicht in het gebruik van iFrames bij webontwikkeling kan de interactiviteit van je site aanzienlijk verbeteren.

In deze gids leggen we uit hoe het iFrame element werkt, laten we een basis iFrame HTML voorbeeld zien en leiden we je door essentiële iFrame attributen en gebruikstips. Je leert ook hoe wij, bij Bluehost, het eenvoudig maken om inhoud in te sluiten en te beheren met iFrames, zonder dat je hoeft te coderen.

Wat is een iFrame in HTML?

Een iFrame is een HTML-element dat wordt gebruikt om een ander HTML-document in te sluiten in de huidige webpagina. Zie het als een venster dat een andere website of inhoud weergeeft zonder dat de bezoeker je site hoeft te verlaten.

Het iFrame wordt gemaakt met de tag

Hier lees je hoe het werkt:

• Het “src” attribuut wijst naar de URL van de pagina die je wilt weergeven.
• Je kunt attributen voor breedte en hoogte instellen om de grootte van het frame te bepalen.
• Het iFrame zit in je huidige HTML-lay-out en wordt onderdeel van de browsercontext van de gebruiker.

Nu je weet wat een iFrame is en hoe het werkt, laten we eens kijken hoe je het kunt gebruiken om nuttige en aantrekkelijke inhoud op je site te zetten.

Lees ook: Wat is een URL? De structuur, syntaxis en SEO best practices

Wat zijn de populairste gebruikssituaties voor iFrames?

iFrames zijn ongelooflijk veelzijdig en werken goed voor blogs, e-commercesites of portfolio’s. Met iFrames kun je inhoud van andere websites insluiten zonder ingewikkelde code te schrijven of bezoekers een nieuw venster te laten openen. Ze stellen je in staat om inhoud van andere websites in te sluiten zonder ingewikkelde code te schrijven of bezoekers naar een nieuw venster te sturen. Laten we eens kijken naar enkele van de meest voorkomende en effectieve manieren om ze te gebruiken:

1. Video’s insluiten

Een van de populairste toepassingen van de iFrame-tag is het insluiten van YouTube-video’s op een pagina. Je kunt de ingesloten URL van YouTube in het ‘iframe src’-attribuut plakken om inhoud zoals tutorials, muziek of webinars direct op je site weer te geven.

Voorbeeld:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe> 

Dit is perfect om je inhoud te verbeteren zonder de pagina te groot te maken.

2. Kaarten of documenten weergeven

Wilt u een Google Maps-locatie of een online document delen? Je kunt een iFrame gebruiken om inhoud van tools zoals Google Docs, Sheets of Maps weer te geven op je pagina. Dit wordt vaak gebruikt op bedrijvengidsen en contactpagina’s.

3. Externe tools integreren

Van formulieren en enquêtes tot boekingswidgets en chatbots, met iFrames kun je een breed scala aan tools opnemen in je site. Dit is vooral handig als de inhoud op een ander platform wordt gehost. Het wordt vaak gebruikt om betalingsformulieren, inschrijvingsmodules of calculators in te sluiten.

4. Posten op sociale media weergeven

Je kunt iFrames ook gebruiken om social media feeds of posts in te sluiten, zoals Facebook video’s of Instagram stories. Zo kunnen bezoekers in realtime verse inhoud zien zonder dat ze andere websites hoeven te bezoeken.

5. Live-streaming en webinars

Als je een live-evenement organiseert, kun je een YouTube-video, zoomsessie of webinarspeler insluiten met behulp van de iframe HTML. Dit houdt je publiek betrokken bij je eigen site tijdens live uitzendingen.

Nu je hebt gezien hoe flexibel iFrames kunnen zijn, laten we eens kijken naar een eenvoudig iFrame-voorbeeld dat je kunt kopiëren en meteen op je webpagina kunt gebruiken.

Basis iFrame HTML voorbeeld (kopiëren + plakken)

Maak je geen zorgen als coderen nieuw voor je is. Hier is een basis iFrame HTML-voorbeeld dat je kunt kopiëren, plakken en aanpassen voor je eigen webpagina. Dit voorbeeld gebruikt een YouTube-video, maar je kunt de URL “iframe src” vervangen door elke externe inhoud die je wilt insluiten.

<iframe  
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"  
  width="560"  
  height="315"  
  frameborder="0"  
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"  
  allowfullscreen> 
</iframe> 

Dit is wat elk onderdeel doet:

• src: De URL van de pagina of media die je wilt weergeven (de iFrame-bron genoemd).
• breedte en hoogte: Deze attributen bepalen de grootte van je iFrame.
• kaderrand: Gebruik 0 om de rand rond het frame te verwijderen.
• allowfullscreen: Schakelt de modus Volledig scherm in voor videospelers.

Dit iFrame wordt gebruikt om een video weer te geven, maar je kunt het ook verwijzen naar kaarten, documenten, formulieren of andere pagina’s met behulp van de juiste src.

Tip: Zorg er altijd voor dat de iFrame src HTTPS gebruikt om problemen met gemengde inhoud op je HTML-pagina te voorkomen.

Nu je een voorbeeld hebt gezien, laten we eens kijken naar de belangrijkste iFrame attributen en hoe ze het gedrag, het uiterlijk en de beveiliging van je inhoud bepalen.

Wat zijn de belangrijkste iFrame-attributen en wat regelen ze?

Bij het insluiten van inhoud met iFrames speelt elk attribuut een belangrijke rol bij het bepalen hoe de inhoud eruitziet, wordt geladen en zich gedraagt. Van het instellen van afmetingen tot het verbeteren van beveiliging en toegankelijkheid, deze attributen helpen ervoor te zorgen dat je afbeeldingen soepel, veilig en responsief zijn.

Of je nu een video, kaart of formulier toevoegt, de juiste instellingen kunnen ervoor zorgen dat je iFrame-inhoud naadloos overgaat in je site.

Hier is een tabel met snelle verwijzingen naar de meest essentiële iFrame attributen:

Attribuut	Beschrijving	Voorbeeld
src	Bron URL voor het iFrame	src=“https://[voorbeeld].com”
laden	Lazy load voor prestaties	loading=“lazy”
zandbak	Beperkt iFrame rechten	sandbox=“allow-scripts”.
toestaan	Geeft specifieke rechten aan iFrame	allow=“volledig scherm; automatisch afspelen”
doel	Bepaalt waar links worden geopend vanuit iFrame	doel=”_blank
breedte	Stelt de breedte van het iFrame in	width=“560”
hoogte	Stelt iFrame hoogte in	height=“315”
kader	Bepaalt de rand van het frame	frameborder=“0”
titel	Beschrijft inhoud voor schermlezers	title=“YouTube-videospeler”.
naam	Wijst een naam toe aan het iFrame	name=“kaart_iframe”.

Laten we de meest voorkomende en belangrijkste in detail bekijken:

1. src, hoogte, breedte, kader

• Src (bron): Dit is het meest kritieke onderdeel van een iFrame. Het src attribuut specificeert de URL van de pagina of inhoud die je wilt insluiten. Bijvoorbeeld een YouTube embed URL of een Google Maps locatie. Gebruik altijd beveiligde links die beginnen met “https://” om browserwaarschuwingen te voorkomen.
• Breedte en hoogte: Hiermee bepaal je hoeveel ruimte het iFrame inneemt op je webpagina. Pas deze waarden aan aan de lay-out van je site. Veel moderne ontwikkelaars gebruiken ook aspect ratio en responsieve CSS-styling om iFrames mobielvriendelijk te maken.
• Frameborder: Hiermee bepaal je of er een rand om het iFrame zit. Een waarde van 0 verwijdert de rand, waardoor je ingesloten element er netter uitziet.

Deze kernattributen zijn meestal de eerste aanpassingen die webontwikkelaars maken bij het insluiten van inhoud met een iFrame.

2. Sandbox, toestaan, doel, laden (lui laden)

• Sandbox-attribuut: Beperkt wat de ingesloten inhoud kan doen. Scripts kunnen worden geblokkeerd, formulieren kunnen niet worden verzonden en pop-ups kunnen niet worden geopend. Je kunt ook selectief functies inschakelen zoals formulieren toestaan, scripts toestaan of pop-ups toestaan voor specifieke functionaliteit. Dit is essentieel om het risico op schadelijke inhoud te beperken.
• Kenmerk toestaan: Verleent rechten aan het iFrame, waaronder schermvullend, autoplay of camera. Dit werkt samen met sandbox-instellingen om je te laten bepalen waartoe ingesloten inhoud toegang heeft.
• Doelattribuut: Vaak gebruikt bij het linken binnen een iFrame. Het doelattribuut bepaalt waar het gelinkte document wordt geopend. Het kan in hetzelfde frame zijn, een nieuw tabblad of een aangewezen doelframe op je site.
• Laad attribuut: Hiermee bepaal je hoe het iFrame wordt geladen op je pagina. Als je het instelt op “lui”, wordt het laden uitgesteld totdat de gebruiker ernaar toe scrollt, waardoor de prestaties en snelheid van de pagina worden verbeterd. Dit is vooral handig bij het insluiten van externe inhoud zoals hele webpagina’s of grote mediabestanden.

iFrames zitten boordevol flexibele opties, maar het juiste gebruik van deze attributen is de sleutel tot een naadloze en veilige ervaring.

Laten we nu eens kijken hoe we het gebruik van iFrames kunnen optimaliseren voor betere prestaties, toegankelijkheid en browsercompatibiliteit.

Wat zijn de beste manieren om iFrames op je site te gebruiken?

Hoewel iFrames gemakkelijk te gebruiken zijn, kunnen ze leiden tot beveiligingsrisico’s, opmaakproblemen of trage laadtijden als ze niet goed worden geïmplementeerd. Hieronder staan best practices om je te helpen het iFrame-element veilig en efficiënt te gebruiken in je HTML-inhoud:

1. Reactievermogen en toegankelijkheid

Moderne websites moeten er geweldig uitzien op alle apparaten. iFrames kunnen een uitdaging vormen voor responsive design. Om ervoor te zorgen dat je ingesloten inhoud schaalt met de schermgrootte:

• Gebruik CSS-stijlen zoals “width: 100%” en behoud een hoogte-breedteverhouding met opvulling.
• Voeg het title-attribuut toe om de inhoud te beschrijven voor schermlezers. Dit verbetert de toegankelijkheid.

Voorbeeld:

<iframe src="..." title="YouTube video player"></iframe> 

2. Beveiligingsproblemen en laadfouten vermijden

Gebruik het sandbox attribuut om te bepalen hoe het iFrame zich gedraagt en om kwaadaardige inhoud te voorkomen. Sta alleen toestemmingen toe die essentieel zijn. Altijd:

• Gebruik “https” in de iFrame src voor een veilige insluiting.
• Stel de juiste waarden in voor het referrerbeleid en laat toe om ongewenste tracking of pop-ups te vermijden.

3. Stijl met CSS voor een naadloze look

In plaats van verouderde HTML-attributen zoals frameborder te gebruiken, kun je iFrames opmaken met CSS. Dit geeft je meer controle over het uiterlijk:

• Gebruik de CSS border eigenschap om randen aan te passen of te verwijderen.
• Stel opvulling, marge en uitlijning in met stijlattributen of externe stylesheets.

4. Gebruik beschrijvende fallback-inhoud

Als de externe bron niet wordt geladen of wordt geblokkeerd door een browser, kan een fallbacktekst gebruikers helpen begrijpen wat ze missen. Plaats tekst tussen de openende en sluitende

<iframe src="...">Your browser does not support iFrames. Please visit the original page.  

</iframe>

Laten we nu eens kijken hoe we het gebruik van iFrames kunnen optimaliseren voor betere prestaties, toegankelijkheid en browsercompatibiliteit.

5. Test op alle apparaten en browsers

Omdat iFrames afhankelijk zijn van externe inhoud, kan het gedrag variëren afhankelijk van:

• De browser (sommige functies kunnen beperkt zijn)
• Het apparaat (er kunnen problemen met de reactiesnelheid optreden)
• De instellingen van de bronsite (sommige pagina’s voorkomen insluiten)

Test altijd hoe het iFrame verschijnt en zich gedraagt in meerdere omgevingen, vooral wanneer je inhoud van andere websites insluit of plugins gebruikt.

We hebben nu de best practices voor het gebruik van iFrames op je site besproken. Laten we nu eens kijken hoe wij, bij Bluehost, het makkelijk maken om iFrames toe te voegen met onze AI Website Builder en WordPress tools zonder enige codeervaardigheden.

Hoe Bluehost embedden met iFrames makkelijk maakt?

Embedden met iFrames is eenvoudig, maar alleen als je websiteplatform volledige HTML-aanpassing ondersteunt en inhoud snel laadt. Dat is waar Bluehost in uitblinkt. Of je nu WordPress of een drag-and-drop AI Website Builder gebruikt, wij geven je de flexibiliteit, tools en prestaties om externe content in te sluiten zonder gedoe.

Bluehost maakt het je gemakkelijk:

Stap 1: Kies het juiste Bluehost-abonnement

Begin met het kiezen van een hostingpakket dat past bij je behoeften:

• Gedeelde hosting: Zeer geschikt voor beginners die een persoonlijke of zakelijke site willen bouwen met basale HTML-ondersteuning.
• WordPress hosting: Ideaal voor gebruikers die flexibiliteit, plugins en aangepaste blokken voor insluiting willen.

Zorg er bij de installatie voor dat je gratis SSL-certificaat is geactiveerd. Zo wordt al je iFrame-inhoud veilig geladen via HTTPS, waardoor browserwaarschuwingen worden voorkomen en moderne embeds mogelijk worden.

Welke plannen je ook kiest, je krijgt volledige ondersteuning voor de iFrame-tag, externe media en responsief ontwerp.

Met Bluehost krijg je de tools om media in te sluiten, iFrames te gebruiken en vrij te ontwerpen, zonder technisch gedoe.

Wil je video’s, kaarten of formulieren insluiten op je site? Bouw je WordPress site met Bluehost en begin met het insluiten van content in slechts enkele minuten.

Stap 2: Ga naar de website builder of het WordPress dashboard

Als je eenmaal bent ingesteld, log dan in op je Bluehost Account Manager en ga naar de site-editor van je voorkeur:

• Met onze AI-gestuurde bouwer, WonderSuite, kun je je site visueel ontwerpen en iFrames invoegen met behulp van een eenvoudig aangepast HTML-blok.
• Als je de Gutenberg (Block) Editor gebruikt, klik dan op het “+” pictogram, selecteer Aangepaste HTML en plak je iFrame code.
• En als je de klassieke editor gebruikt, ga dan naar het tabblad “Tekst” en plak de iFrame-code direct.

Welke optie je ook kiest, je hebt volledige controle over hoe je iFrame element wordt weergegeven op je pagina.

Stap 3: Gebruik een HTML-blok om iFrame code te plakken

In de editor van je keuze:

• Een aangepast HTML-blok toevoegen
• Plak het volledige iFrame-fragment, zoals:

<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" allowfullscreen></iframe> 

• Werk de iFrame src bij zodat deze overeenkomt met de URL van de pagina of externe bron die je wilt insluiten. Bijvoorbeeld een YouTube-videospeler, Google Maps of een enquêtetool.

Hiermee kun je inhoud van andere websites weergeven op je eigen website.

Lees ook: Hoe HTML toevoegen aan een websitebouwer voor WordPress

Stap 4: Uiterlijk en grootte aanpassen

Nu je iFrame is geplaatst, is het tijd om het mooi te laten passen in de lay-out van je site:

• Pas de breedte- en hoogte-attributen aan om te bepalen hoe het iFrame wordt weergegeven op verschillende schermformaten.
• Gebruik het style attribuut of externe CSS voor meer controle. Verwijder de rand rond het frame, pas opvulling toe of centreer het element.
• Als je WonderTheme gebruikt, is je site al geoptimaliseerd voor responsieve lay-out, dus je iFrames passen zich automatisch aan alle schermformaten aan.

Stap 5: Plugins gebruiken voor geavanceerde iFrame-functionaliteit (alleen WordPress)

Wil je meer controle? Installeer plugins zoals:

• Geavanceerd iFrame: Pas schuifbalken, beveiliging, lui laden en grootte aan.
• EmbedPress: Embed 100+ inhoudstypen (video’s, documenten, kaarten, enz.) met een enkel blok.
• iFrame Shortcode: Voeg iFrame-inhoud toe aan berichten en widgets met behulp van shortcodes.

Deze plugins worden volledig ondersteund in de geoptimaliseerde WordPress-omgeving van Bluehost.

Stap 6: Optimaliseren voor prestaties en SEO

Om ervoor te zorgen dat je site snel draait en zoekvriendelijk is:

• Voeg het loading=“lazy” attribuut toe om het laden uit te stellen totdat het iFrame in beeld schuift.
• Gebruik de titel en naam attributen voor toegankelijkheid en verbeterde SEO metadata.
• Stel de juiste sandbox- en allow-instellingen in om beveiligingsrisico’s te beperken en tegelijkertijd specifieke functionaliteit in te schakelen, zoals volledig scherm, formulieren of pop-ups.
• Gebruik Yoast SEO, dat vooraf is geïnstalleerd bij onze WordPress hosting, om de pagina met je iFrame te optimaliseren. Het helpt zoekmachines je inhoud beter te begrijpen en verbetert de algehele gebruikerservaring.

Stap 7: Publiceer en test je pagina

Voordat u live gaat:

• Bekijk een voorbeeld van je pagina op desktop en mobiel.
• Zorg ervoor dat de iFrame-inhoud goed wordt geladen en je lay-out niet breekt.
• Vraag de 24/7 ondersteuning van Bluehost om hulp als er iets niet werkt zoals verwacht.

Zodra alles er goed uitziet, druk je op “Publiceren” om je iFrame te starten!

Laatste gedachten

Wil je een YouTube-video, Google Map of externe tool insluiten zonder ingewikkelde code te hoeven aanraken? Dat is de kracht van een iFrame.

Je weet nu wat een iFrame is, hoe je de iFrame-tag gebruikt en hoe je veilig rijke ingesloten inhoud aan je HTML-pagina toevoegt. Het is een van de eenvoudigste manieren om je site te verrijken met interactieve media.

En met Bluehost is het nog makkelijker. Ontdek onze AI-aangedreven Website builder, responsieve WonderTheme templates en ingebouwde tools zoals Yoast SEO maken het embedden met iFrames snel, flexibel en beginnersvriendelijk.

Klaar om je site te verbeteren met iFrames? Begin nu met bouwen op Bluehost.

FAQs