Wat is een iframe?

Een iframe (inline frame) is een standaard HTML-element, <iframe>, dat een apart webdocument laadt binnen een rechthoekig gebied van de huidige pagina. YouTube’s videospeler wordt op deze manier geleverd: de omliggende pagina blijft van jou, terwijl het ingekaderde gebied YouTube’s eigen spelercode draait.

Waarom YouTube een iframe gebruikt

Omdat de speler in zijn eigen frame draait, is deze om veiligheidsredenen afgeschermd van de rest van de pagina, krijgt hij automatische updates van YouTube zonder dat de insluitende site iets hoeft te veranderen, en kan hij eenvoudig worden gewisseld tussen het standaard youtube.com-domein en het privacyvriendelijke youtube-nocookie.com-domein door alleen de bron-URL te wijzigen.

Veelgebruikte iframe-attributen voor video-embeds

De belangrijkste zijn src (de embed-URL en de parameters ervan), title (voor schermlezers), allow (welke rechten het frame krijgt, zoals autoplay of fullscreen), allowfullscreen, en loading=”lazy” voor prestaties.

Hoe een iframe past in de rest van een webpagina

Een webpagina is normaal gesproken één doorlopend HTML-document, maar een iframe creëert een grens: alles erbinnen is een apart document, met eigen scripts, stijlen en browsercontext, weergegeven in een kader dat je met gewone CSS positioneert. Deze afscherming is net zo goed een beveiligingsfunctie als een technische keuze. Een pagina die een YouTube-iframe insluit, kan niet rechtstreeks lezen of aanpassen wat er binnen de YouTube-speler gebeurt, en de speler kan niet rechtstreeks de rest van jouw pagina lezen of aanpassen, verder dan wat elke kant expliciet toestaat via browser-API’s.

Een praktisch voorbeeld

Het verschil tussen een iframe en simpelweg linken naar een pagina is direct zichtbaar als je de twee naast elkaar zet. Een link, <a href="https://youtube.com/watch?v=ID">Bekijk op YouTube</a>, stuurt een bezoeker volledig weg van jouw pagina. Een iframe, <iframe src="https://www.youtube-nocookie.com/embed/ID"></iframe>, houdt de bezoeker op jouw pagina terwijl YouTube’s speler binnen een vastgesteld gebied wordt getoond. Het src-attribuut doet in beide gevallen iets heel anders: navigatiedoel versus bron van een ingesloten document.

Iframe versus andere embed-technieken

Iframes zijn niet de enige manier om externe content in te sluiten, maar ze zijn de standaardaanpak voor een volledig interactieve applicatie van derden zoals een videospeler. Alternatieven zoals het insluiten van een statische afbeelding of een linkvoorbeeldkaart laten veel minder zien: ze bieden geen afspeelbediening, kunnen geen videodata streamen, en reageren niet op interactie zoals een op iframe gebaseerde speler dat wel doet. Voor alles wat echte interactiviteit van een andere bron vereist, videospelers, kaarten, betaalwidgets, is een iframe (of de meer gespecialiseerde API’s daarbovenop) meestal de enige praktische optie. Zie embed-code voor hoe een iframe wordt verpakt in de HTML die je daadwerkelijk op een pagina plakt.

Veelgestelde vragen