HTML Iframe (Beágyazások)

Gyakran előfordul, hogy egy másik weboldal tartalmát szeretnéd megjeleníteni a saját oldaladon belül. Például egy YouTube videót akarsz megmutatni a cikkedben, vagy a céged címét egy interaktív Google Térképen a kapcsolat oldalon. Erre a célra találták ki az <iframe> (Inline Frame) taget.

Mi az az Iframe?

Képzeld el az iframe-et úgy, mint egy ablakot a weboldaladon, amin keresztül a látogatók kinézhetnek egy teljesen másik weboldalra. A beágyazott tartalom nem a te szervereden van, te csak megjeleníted azt.

Az Iframe Szintaxisa

Az <iframe> tag használata nagyon hasonlít a képek (<img>) beillesztéséhez. Itt is az src (source) attribútum mondja meg, hogy mit töltsön be a böngésző.

<iframe src="https://hu.wikipedia.org" width="100%" height="400"></iframe>

Megjegyzés: Sok nagy weboldal (például a Facebook vagy a Google főoldala) biztonsági okokból letiltja, hogy iframe-ben jelenítsék meg őket. Ilyenkor a doboz üres marad.

Gyakorlati példa 1: YouTube videó beágyazása

Soha ne tölts fel videófájlokat (mp4) közvetlenül a saját szerveredre, mert pillanatok alatt lelassítják a weboldaladat, és felemésztik a tárhelyedet. A profi megoldás: töltsd fel a videót a YouTube-ra, és ágyazd be iframe-mel.

A YouTube ezt nagyon egyszerűvé teszi:

1. Nyisd meg a videót a YouTube-on.
2. Kattints a videó alatti Megosztás gombra.
3. Válaszd a Beágyazás (Embed) ikont.
4. Másold ki a kapott HTML kódot, és illeszd be a weboldaladra.

A kapott kód valahogy így fog kinézni:

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

A allowfullscreen attribútum engedélyezi a látogatónak, hogy teljes képernyőre tegye a videót.

Gyakorlati példa 2: Google Térkép beágyazása

A kapcsolat oldalak elengedhetetlen kelléke az interaktív térkép. A folyamat itt is hasonló:

1. Keresd meg a címet a Google Maps-en.
2. Kattints a Megosztás gombra a bal oldali panelen.
3. Válaszd a Térkép beágyazása fület.
4. Másold ki a HTML kódot.

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

SEO és Sebesség Tipp: Figyeld meg a loading="lazy" attribútumot a fenti kódban! Ez egy modern HTML funkció. Azt mondja a böngészőnek, hogy az iframe-et (a nehéz térképet) csak akkor kezdje el letölteni, amikor a látogató már majdnem oda görgetett. Ezzel drasztikusan felgyorsíthatod a weboldalad betöltési idejét!