iframe-generator: responsieve embedcode met preview | We.Inc
Maak iframe-code voor elke URL: responsieve beeldverhouding of vaste maat, lazy loading, titel, sandbox-tokens, allow en referrer policy, met een live preview.
Plak het adres dat u wilt insluiten, geef het frame een titel, kies een responsieve vorm of een vaste maat, en deze generator schrijft de iframe-tag met lazy loading, sandbox-tokens, rechten en een referrer policy. De preview hieronder laadt uw adres, zodat u kunt controleren of de site insluiten echt toestaat voordat u de code plakt.
Wat elke optie schrijft
Optie
Attribuut of stijl
Standaard in deze tool
Titel
title="..."
Verplicht, gebruikt door schermlezers
Responsieve vorm
style="width:100%;aspect-ratio:16 / 9"
Vaste maat
width en height
Browserstandaard is 300 bij 150
Lazy loading
loading="lazy"
Aan
Sandbox
sandbox="..."
Uit; vink tokens aan om te beperken
Rechten
allow="fullscreen; ..."
alleen fullscreen
Referrer
referrerpolicy="..."
De meeste iframe-fragmenten online missen minstens één ding dat een moderne embed nodig heeft: een titel voor hulptechnologie, lazy loading zodat het eerste scherm niet trager wordt, een responsieve maat en de kleinste set rechten. Deze tool schrijft ze allemaal voor elk adres. Voor video, kaarten en boekingspagina's van bekende aanbieders zet onze embedcode-generator ook hun deellinks om in embedlinks.
Plak het volledige https-adres van de pagina die u wilt insluiten en schrijf een korte titel die zegt wat het is.
Kies Responsief met een beeldverhouding, of Vast met een breedte en hoogte in pixels.
Laat lazy loading aan, tenzij de embed helemaal bovenaan de pagina staat.
Vink sandbox-tokens aan als de inhoud niet volledig te vertrouwen is, en vink alleen de rechten aan die de embed nodig heeft.
Druk op Preview laden om de embed precies te zien zoals de code hem beschrijft, en kopieer dan de code.
Als de preview een grijs vak met een geweigerde verbinding toont, verbiedt de site insluiten. Geen enkel attribuut kan dat veranderen; zie onze gids over die fout.
Gebruik voor video en kaarten het eigen embedadres van de aanbieder. Hun gewone paginaadressen zijn vaak geblokkeerd voor insluiten.
Houd allow zo klein mogelijk. Elke functie die u opneemt, zoals camera of geolocatie, wordt aan de ingesloten site aangeboden.
Houd zware embeds onder het eerste scherm, zodat lazy loading zijn werk kan doen.
Vink niet zowel allow-scripts als allow-same-origin aan voor inhoud van uw eigen site; samen heffen ze de sandbox op.
Veelgestelde vragen
Hoe maak ik een iframe responsief?
Geef het width: 100% en een aspect-ratio zoals 16 / 9, en laat de hoogte automatisch. De browser houdt de vorm dan op elke breedte vast. De oudere truc met een padding-top-wrapper is niet meer nodig nu aspect-ratio breed wordt ondersteund.
Wat doet loading="lazy" bij een iframe?
Het stelt het laden uit tot het frame dicht bij het zichtbare deel van de pagina komt. eager, dat meteen laadt, is de standaard. Lazy loading bespaart data en versnelt de eerste weergave voor frames verderop.
Waarom moet elk iframe een titel hebben?
Gebruikers van schermlezers gaan tussen frames op basis van hun titels. Een duidelijke titel, zoals "Boekingskalender voor de studio in Leeds", vertelt hun wat erin staat voordat ze het openen.
Wat zet ik in het allow-attribuut?
Alleen de functies die de embed nodig heeft, gescheiden door puntkomma's, bijvoorbeeld allow="fullscreen; picture-in-picture". Een functie zonder origin opnemen staat hem toe voor de origin in src. allow kan alleen beperken wat de eigen Permissions-Policy-header van de pagina toestaat, nooit verruimen.
Stuurt de preview mijn gegevens ergens naartoe?
Er gaan geen gegevens naar ons. De code wordt op deze pagina gemaakt. De preview is een gewoon iframe in uw browser, dus de ingesloten site krijgt een normaal bezoek van u, net als wanneer uw bezoekers het laden.
Een checklist voor elke embed
Titel, maat, laden, rechten, sandbox, referrer: zes beslissingen, en de generator maakt elk ervan expliciet. De standaarden hier zijn de veilige: lazy, responsief, een referrer policy die tussen sites alleen de origin meestuurt, en geen extra rechten naast fullscreen.
Test de code na het plakken op telefoonbreedte. Een frame met een vaste breedte in pixels is de meest voorkomende oorzaak van zijwaarts scrollen op mobiel.
Als de preview leeg blijft of weigert
Een grijs foutvak betekent dat de ingesloten site een header tegen insluiten heeft gestuurd. Een leeg wit frame betekent vaak dat de site scripts of formulieren nodig heeft die een aangevinkt sandbox-token blokkeert: vink sandbox uit en probeer opnieuw om de twee te onderscheiden.
Sommige sites merken ook dat ze worden ingesloten en tonen dan een andere pagina. Dat gedrag bepalen zij zelf en het is van buitenaf niet te veranderen.
Privacy en prestaties
Elk iframe is een volledige pagina van een andere site, met eigen scripts en mogelijk eigen cookies. Vermeld ingesloten inhoud van derden in uw privacyverklaring en kies privacyvriendelijke embedmodi waar de aanbieder die biedt.
Als een embed groot en optioneel is, overweeg dan een placeholder die pas na een klik laadt: toon een afbeelding en een knop, en voeg het iframe pas in als iemand erom vraagt.
Kant-en-klare patronen
Responsief frame met aspect-ratio
Verklein het venster en het frame behoudt zijn vorm. De binnenpagina komt hier uit srcdoc, zodat het voorbeeld offline werkt.
Placeholder die laadt na een klik
Er laadt niets van de andere site tot de knop wordt ingedrukt. De template-tag bevat het echte iframe.
Bouw uw iframe
Adres om in te sluiten (https)
Titel (beschrijf de inhoud)
Maat
Responsief
Vast
Beeldverhouding
Breedte (px)
Hoogte (px)
Lazy load (loading="lazy")
Inhoud in een sandbox plaatsen
Sandbox-tokens
Rechten (allow)
Referrer policy
Uw code
Code kopiëren
Preview laden
De preview laadt het adres in uw browser. Een grijs foutvak betekent dat die site weigert te worden ingesloten.
Vul een volledig adres in dat begint met https:// of http://.