Mi az az iFrame? YouTube videó beágyazása weboldalon
Mindenki arra törekszik, hogy minél érdekesebb és színesebb tartalommal álljon elő a látogatók számára egy weboldal üzemeltetése során. Blogbejegyzéseknél a legjobbak az interaktív elemek, pl. YouTube videók, Google Maps térképek, vagy akár egész görgethető weboldalak beillesztése egy cikk szövegébe. Ez mind lehetséges az iFrame keretek segítségével, amely egy HTML címke. Ezzel fogunk most megismerkedni részletesebben. 🙂
1. Mi az az iFrame?
Az iFrame (angoul inline frame) a HTML kódolás egyik címkéje, amely által különböző webes tartalmakat tudunk megjeleníteni interaktív formában a saját weboldalunkon, egy kis keretben (innen is ered az elnevezés, mert az angol frame szó jelentése: keret).
A korábbi sima Frame keret nem támogatott HTML5-ben, ezért van szükségünk a beillesztett tartalmakhoz iFrame keretekre.
Nézzük meg a lehetőségeket, hogyan tudnánk beilleszteni a Kiszervezett Marketing blog oldalát egy beágyazott keret segítségével:
<html> <head> <title>iFrame használata</title> </head> <body> <name>Online marketing blog</name> <iframe src="https://www.kiszervezettmarketing.hu/blog" width="600" height="600" seamless> </iframe> </body> </html>
A Tryit Editor használatával le is tudjuk ellenőrizni, hogy miképpen fog kinézni a végeredmény:
Az iFrame tehát egy virtuális keretben enged hozzáadni szinte bármilyen tartalmat a weboldalunkhoz, így beillesztve más HTML-dokumentumokat a fő egységbe.
A keretben megjelenő tartalomnak lehet saját görgetője is, amely független az anyaoldaltól.
Beollózhatunk akár hirdetéseket vagy videókat is a weboldalunkba a használatával.
2. Az iFrame paraméterei
- height = szám. Az iFrame keret képpontban közölt magassága.
- name = szöveg. Az iFrame keret elnevezése, hogy tudjunk rá hivatkozni.
- scrolling = yes/no/auto. Görgethető legyen a keret vagy sem.
- src = URL. Hivatkozás a forrásra egy URL cím használatával, ez a tartalom lesz megjelenítve az iFrame-ben.
- width = szám. Az iFrame keret képpontban közölt szélessége.
- srcdoc = HTML kód. Az iFrame HTML-kódlapjának megadása.
- sandbox = allow-forms/allow-scripts/allow-top-navigation/allow-popups. Speciális korlátozások és engedélyek az elemek tartalmára. Pl. űrlapok küldése, szkriptek engedélyezése, felugró ablakok megjelenítése, stb.
- seamless = logikai attribútum. A szegély eltüntetése, így a beágyazott tartalom a weboldal közvetlen részeként jelenik meg.
- allowfullscreen = logikai attribútum. Lehetővé teszi az iFrame keretben beágyazott oldal teljes képernyős megjelenítését.
- longdesc = URL. Az iFrame tartalmának részletesebb leírása, de nem szövegben, hanem csak az arra mutató URL cím segítségével.
- referrerpolicy = no-referrer/origin/origin-when-cross-origin/same-origin/unsafe-url. A hivatkozási információt határozza meg az iFrame lekérdezésekor.
3. YouTube videó beágyazása iFrame kerettel
Az iFrame segítségével nemcsak weboldalakat és szöveges dokumentumokat lehet beágyazni más honlapokra, hanem akár YouTube videókat is!
Nincs más dolgunk, mint megadni a keret nevét/címét, szélességét és magasságát, majd a forrás URL-t. Nem a hivatalos YouTube linket kell beágyaznunk, hanem kicsit át kell alakítani beágyazható formájúra.
Például: eredeti link = https://www.youtube.com/watch?v=8jPQjjsBbIc&t, viszont beágyazható link = https://www.youtube.com/embed/8jPQjjsBbIc&t – tehát az embed használatával valósítható meg.
<h1> Hogyan illesszünk be YouTube videót iFrame használatával? </h1> <iframe width="600" height="460"src="https://www.youtube.com/embed/8jPQjjsBbIc" frameborder="0" allowfullscreen> </iframe>
A végeredmény pedig a képen látható:
Létezik azonban egy sokkal egyszerűbb megoldás is, mivel a YouTube automatikusan rendelkezésünkre bocsát beágyazási kódokat. Nincs más dolgunk, mint jobb klikkelni a videón, és kimásolni a kódot.
Használhatjuk még a videó alatti Megosztás gombot, és a Beágyazás opciót, akkor is megjelenik majd a HTML-kód. Ez esetben így fog kinézni az iFrame keret kódja, a YouTube által beállított értékekkel együtt:
Persze a legjobb, ha saját videónkat ágyazzuk be a weboldalunk felületére ilyen módon a külső tartalmak helyett, és így nem kell feltölteni a tárhelyszerverünkre sem, szóval helyet spórolhatunk az iFrame használatával.
4. Térképek elhelyezése a weboldaladon
YouTube videók mellett a másik közkedvelt interaktív tartalom a térképek alkalmazása, melyeket szintén be tudunk illeszteni iFrame kerettel.
A Google Térkép lehetővé teszi a YouTube-hoz hasonlóan a beágyazható kódok kimásolását. A lenti képen például a Budai Várra kerestünk rá a térképen.
Keressünk rá egy helyre a térképen, majd menjünk a Megosztás gombra, és válasszuk ki a Térkép beágyazása lehetőséget. A kimásolható HTML-kódot itt tudjuk majd elérni.
Miután ez megvan, létre tudjuk hozni az iFrame keretes HTML-t:
<html> <body> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2695.6708752076574!2d19.037576615504136!3d47.496324679177505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741dc3c8c94ccc9%3A0xeb87d955072a40fe!2zQnVkYWkgVsOhciDwn4-w!5e0!3m2!1shu!2shu!4v1652866787928!5m2!1shu!2shu" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </body> </html>Ha csak simán az <iframe src=”URL”></iframe> részt beillesztjük a WordPress felületén, az alábbi végeredményt fogjuk kapni:
Ilyen egyszerű tehát az interaktív elemek felvétele a weboldalunkra, ezzel is még érdekesebbé téve a bejegyzéseinket.
5. Hogyan használd az iFrame beágyazást WordPress weboldalon?
Egy WordPress bejegyzésbe úgy tudunk beágyazni külső tartalmakat interaktív formában, ha először is létrehozunk egy új bejegyzést, vagy szerkesztünk egy már meglévő posztot.
Nyissuk meg a HTML nézetet, és ide illesszük be az iFrame keretes beágyazási kódot.
Ezzel már meg is jelenik a beágyazott Google Térkép és YouTube videó a bejegyzésünkben, amit láthatunk a Vizuális nézetben is.
Nincs más dolgunk, mint közzétenni a weboldalt, vagy ha már létező bejegyzésbe illesztettük az iFrame HTML-kódokat, akkor frissíteni az adatokat, és készen is van. 🙂
6. Milyen hatással van az iFrame a honlapodra?
Mivel a legtöbb beágyazott elem nem saját lesz, hanem külső forrásból származó tartalom, ezért SEO szempontjából nem fogunk előrébb rangsorolni az iFrame keretek használatával.
Viszont sokkal jobban lehet így szemléltetni a bejegyzéseinket, olvashatóbbá tenni őket. Az audiovizuális tartalom, az interaktív elemek és a színes képek/videók mindig növelik a felhasználói élményt, különösen reszponzív design esetén.
Fontos, hogy ne pakoljuk tele a honlapunkat beágyazott tartalmakkal, mert ez lassítja a betöltési időt, és könnyen a visszájára fordulhat a jó szándékunk: oldalunk lelassul, felhasználóink gyorsan lelépnek, a keresőoptimalizáltság lecsökken.
Legyünk körültekintőek, és használjuk mértékkel az iFrame HTML-kódokat! Minden egyes beágyazott ablak külön betöltést és szerver irányába küldött lekérdezést indít el, ezt tartsuk észben.
Figyeljünk arra is, hogy ha külső forrásból illesztünk be tartalmakat, akkor a tulajdonosuk bármikor megváltoztathatja azokat, így pl. egy törölt YouTube videó már nem fog megjelenni az oldalunkon.
7. Összefoglaló
Az iFrame egy olyan HTML-keretkód, amellyel be tudunk illeszteni interaktív tartalmi elemeket a weboldalunk felületére.
Beágyazhatunk videókat, térképeket, hirdetéseket, de még akár egész weblapokat is egy bejegyzésbe, a felhasználók pedig megnyithatják ezeket, vagy szabadon görgethetnek bennük.
Nincs más dolgunk, mint YouTube videók vagy Google Térképek esetén beágyazható linkeket illeszteni a WordPress weboldalunk HTML szövegébe, és meg is jelenik a kívánt elem.
Bár a vizuális tartalom olvashatóbbá teszi a bejegyzéseket, azért ne essünk túlzásba, mert a túl sok interaktív betöltődő elem lassíthatja az oldalunk betöltési sebességét.
Tetszett a bemutatott téma? Ha igen, ne habozz a megosztással és a kedveléssel. Köszönjük a visszajelzést! 🙂
Hibát találtál? Írj nekünk az alábbi e-mail címre: szerk@kiszervezettmarketing.hu
8. Gyakran ismételt kérdések és válaszok
Egy HTML-keretkód, aminek segítségével be tudjuk illeszteni az eltérő típusú interaktív tartalmakat (pl. videó, görgethető térkép) a weblapunk felületére.
YouTube videók és Google Térképek esetén is van lehetőség beágyazható linkek másolására, amit beilleszthetünk a WordPress oldalunk HTML dokumentumába.
Lelassíthatja az oldal betöltési sebességét, ha túl sok interaktív elemmel pakoljuk tele.
