Az iframe jellemzően külső weboldalak által nyújtott szolgáltatások pl. térképek, kiadványlapozók, egyes videók (kivéve YouTube amiről itt olvashat részletesen.) beágyazásához használt HTML tag. Sajnos azonban önmagában biztonsági kockázatot jelent, ezért a HTML tag-et át kell írnunk egy úgy nevezett rövid kódra (shortcode)!
A szolgáltató weboldalak (pl. videólejátszó oldalak, térkép, stb.) készen adják a teljes kódot, amit általában a Share vagy Megosztás → Embed fülből lehet kimásolni. Ezt a kódot kell az adott oldal vagy bejegyzés HTML nézetébe (fül) beilleszteni. A kapott kódot a következők szerint kell módosítani (ez egy példa Térkép kód, ami valójában ennél jóval hosszabb, most az átláthatóság miatt rövidítettük):
A kapott html kód – még át kell alakítani!
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2696″ width=”600″ height=”450″ style=”border:0;”></iframe>
Így alakítsa át a kódot!
A biztonságos beágyazáshoz a klasszikus HTML kódot beillesztés után módosítjuk: mindössze az elején és a végén kell lecserélni a „helyesírását”, minden más maradhat. Így a fent látott kódból az alábbi lesz:
Fontos! Ha ezt az alábbi rövidkódot kimásolja mintának, akkor mindig vagy a HTML nézetbe illessze be, vagy a „Beillesztés egyszerű szövegként” opcióval tegye be a saját weboldalába!
[iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2696″ width=”100%” height=”450″ style=”border:0;”]
A köztes tartalom szinte teljesen ugyanaz, mindössze a „<>” jelejet cseréltük le „[]„-re a kezdő tagben, a „</iframe>” záró tag pedig eltűnt.
Az src (vagyis source = forrás) részben a konkrét tartalom linkje szerepel, míg a továbbiakban a formázást lehet módosítani. A szélességet érdemes százalékra módosítani (100% vagy amit szeretnénk), mert így a képernyő méretétől függetlenül (pl. mobilméret) mindig azonos arányban jelenik meg a beágyazott tartalom. Az iframe-hez használható további attribútumok listája elérhető ezen az oldalon, lejjebb görgetve.