Du vil vise en YouTube-video eller et Google Maps-kart på nettsiden din, men du vil ikke laste opp filene selv eller bygge en egen kartløsning. Begge tjenestene gir deg en kodesnutt du kan lime rett inn i HTML-en. Den kodesnutten er en HTML iframe, et element som bygger inn en hel nettside inni en annen.
Slik bygger du inn en YouTube-video med iframe
Gå til YouTube-videoen du vil bygge inn. Klikk Del under videoen, og velg Bygg inn. YouTube gir deg en ferdig iframe-kode som ser omtrent slik ut:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
Kopier hele kodesnutten og lim den inn i HTML-filen din. Ferdig. Videoen vises direkte på nettsiden, med YouTubes egen spiller og alle kontrollene brukeren forventer. Du trenger ikke å hoste videofilen selv, og videoen oppdateres automatisk hvis opplasteren gjør endringer.
Bygg inn Google Maps på samme måte
Google Maps fungerer nesten identisk. Gå til maps.google.com, søk opp adressen eller stedet du vil vise, klikk Del og deretter Bygg inn et kart. Du får en iframe-kode du kan lime inn. Kartet vises interaktivt på siden din, med zoom, panorering og satellittvisning. Brukeren kan navigere i kartet uten å forlate nettsiden din.
Dette er den vanligste bruken av HTML iframe: å hente innhold fra en annen tjeneste og vise det som en integrert del av din egen side. YouTube, Google Maps, Vimeo, Spotify, og hundrevis av andre tjenester tilbyr innbyggingskoder basert på iframe.
Attributtene som styrer en iframe
Iframe-elementet har tre viktige attributter du alltid bør sette. src er URL-en til innholdet som skal vises. width og height bestemmer størrelsen i piksler. Uten bredde og høyde bruker nettleseren en standard størrelse som sjelden passer innholdet ditt.
Mellom åpnings- og slutt-taggen kan du legge inn fallback-tekst. Denne teksten vises bare hvis nettleseren ikke kan laste iframen. I praksis støtter alle moderne nettlesere iframe, men teksten fungerer som en sikkerhetsventil:
<iframe src="https://example.com" width="600" height="400">Nettleseren din støtter ikke iframe.</iframe>
Du har kanskje sett attributtet frameborder="0" i eldre kode. Det er utdatert. Bruk CSS (border: none;) i stedet for å fjerne rammen rundt iframen.
Sikkerhet med sandbox-attributtet
Når du bygger inn innhold fra en annen kilde med iframe, gir du i praksis den kilden plass på nettsiden din. Det er et sikkerhetsspørsmål. Hva hvis innholdet kjører skadelig JavaScript, sender skjemadata, eller prøver å navigere brukeren bort fra siden din?
Attributtet sandbox løser dette. Legg det til iframen, og nettleseren begrenser hva innholdet kan gjøre:
<iframe src="https://example.com" sandbox></iframe>
Uten noen verdi blokkerer sandbox det meste: JavaScript, skjemainnsending, pop-ups og navigering. Det er den strengeste innstillingen. Trenger du å tillate spesifikke ting, legger du til verdier adskilt med mellomrom:
- allow-scripts lar iframen kjøre JavaScript
- allow-forms lar iframen sende skjemadata
- allow-same-origin lar iframen opptre som om den kommer fra samme domene
- allow-popups lar iframen åpne nye vinduer
For en YouTube-video trenger du sandbox="allow-scripts allow-same-origin" for at spilleren skal fungere. For et statisk kart kan du bruke sandbox uten verdier for maksimal sikkerhet. Tommelfingerregel: start med den strengeste innstillingen og legg til tillatelser kun når iframen ikke fungerer uten dem.
Når du bør bruke iframe vs. video-taggen
Hvis du har en videofil du selv hoster, bruk HTML video-elementet. Det gir deg full kontroll over utseende, avspilling og undertekster. Iframen er riktig valg når innholdet allerede finnes på en annen plattform og du vil bygge det inn uten å laste ned og hoste det selv.
En annen forskjell er ytelse. Hver iframe laster en hel nettside inne i din nettside. Det betyr ekstra HTTP-forespørsler, CSS, JavaScript og bilder. Har du fem YouTube-iframes på samme side, laster nettleseren i praksis seks nettsider samtidig. Bruk iframes med omhu, og vurder å lazy-loade dem slik at de først lastes når brukeren scroller ned til dem.
Vanlige feil med HTML iframe
Feil URL i src. Innholdet vises ikke, og brukeren ser enten en tom boks eller en feilmelding. Dobbeltsjekk at URL-en starter med https:// og at den faktisk peker på en innbyggbar ressurs. Ikke alle nettsider tillater at de bygges inn i en iframe.
Manglende sandbox på ukjent innhold. Bygger du inn innhold fra en kilde du ikke kontrollerer, bør du alltid bruke sandbox. Uten det kan innholdet kjøre vilkårlig JavaScript på din side. For innhold fra store, pålitelige tjenester som YouTube og Google Maps er risikoen lav, men det er god vane å alltid tenke sikkerhet.
Iframen tilpasser seg ikke skjermstørrelsen. Width og height i piksler gir en fast størrelse. På mobil kan iframen stikke utenfor skjermen. CSS løser dette, for eksempel med max-width: 100% eller en responsiv wrapper-teknikk. Du kan lese mer om iframe-elementet i MDN-dokumentasjonen.
Neste steg
Nå kan du bygge inn YouTube-videoer, kart og annet eksternt innhold med HTML iframe. For å presentere data i rader og kolonner, forklarer artikkelen om HTML-tabeller strukturen med table, tr, th og td. Vil du lære mer om bilder og alt-tekst, se HTML-bilder med img-taggen. For en oversikt over alt innen HTML, besøk hovedsiden for HTML.
Denne artikkelen bygger på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset lærer du iframe, video, tabeller og skjemaer, og bygger nettsider fra bunnen av med steg-for-steg-videoleksjoner.
