# 7. Multimédia beágyazása HTML-ben

2025. november 13. • 18 perc olvasás • HTML5 alapok

A HTML5 forradalmasította a multimédia kezelést a weben. Ebben a cikkben megismered a `<video>` és `<audio>` elemeket, valamint megtanulod, hogyan ágyazz be YouTube videókat és Google Maps térképeket az `<iframe>` elem segítségével.

#### Érettségi információ

Ez a lecke VEGYES tartalmú!

Ez a lecke érettségin kért és bónusz technikákat is tartalmaz:

- Érettségi anyag: Nem szöveges elemek beágyazása (video, audio alapok)
- Bónusz: iframe, YouTube beágyazás, Google Maps, WebVTT feliratok

Az alapvető multimédia beágyazás hasznos, de az iframe és külső szolgáltatások nem kötelezők.

## Videó beágyazása: <video> elem EMELT SZINT

A `<video>` elem lehetővé teszi videók natív beágyazását HTML-be, külső lejátszó nélkül.

### Alapvető használat

HTML - Egyszerű videó
`<video src="video.mp4" controls> A böngésződ nem támogatja a video elemet. </video>`

#### Video elem tulajdonságai

- Natív lejátszó: A böngésző beépített vezérlőivel
- Nincs plugin: Nem kell Flash vagy más kiegészítő
- Reszponzív: Könnyen alkalmazható különböző képernyőméretekhez
- Akadálymentes: Támogatja a feliratozást és audio leírást

### Video attribútumok

HTML - Video attribútumok
`<video src="termek-bemutato.mp4" controls autoplay muted loop poster="video-cover.jpg" width="800" height="450" preload="metadata"> A böngésződ nem támogatja a HTML5 videót. </video>`

Attribútum | Jelentés | Használat
--- | --- | ---
`controls` | Vezérlők megjelenítése | Lejátszás, szünet, hangerő, teljes képernyő
`autoplay` | Automatikus lejátszás | Videó azonnal elindul (általában muted kell hozzá)
`muted` | Néma indítás | Hang ki van kapcsolva (autoplay-hez kötelező)
`loop` | Ismétlő lejátszás | Videó végén újraindul
`poster` | Előnézeti kép | Kép megjelenítése betöltés előtt
`preload` | Előtöltés módja | none / metadata / auto
`width` | Szélesség pixelben | Videó megjelenítési szélessége
`height` | Magasság pixelben | Videó megjelenítési magassága

#### Autoplay figyelmeztetés

A legtöbb modern böngésző blokkolja az autoplay-t!

- Az `autoplay` csak `muted` attribútummal működik
- A felhasználói élmény szempontjából kerülendő (zavaró lehet)
- Mobil eszközökön általában nem működik adatforgalom takarékosság miatt
- Google Core Web Vitals negatívan értékeli

### Preload attribútum értékei

Érték | Viselkedés | Használat
--- | --- | ---
`none` | Semmi nem töltődik előre | Sávszélesség takarékosság, kevésbé fontos videók
`metadata` | Csak metaadatok (hossz, méretek) | Alapértelmezett, jó kompromisszum
`auto` | Teljes videó előtöltése | Fontos videók, gyors lejátszás indítás

### Több videó formátum - Source elemek

Különböző böngészők különböző formátumokat támogatnak. A `<source>` elemekkel több formátumot adhatsz meg:

HTML - Több videó formátum
`<video controls width="800" poster="video-cover.jpg"> <!-- WebM: nyílt forráskódú, jó tömörítés --> <source src="video.webm" type="video/webm"> <!-- MP4: univerzális kompatibilitás --> <source src="video.mp4" type="video/mp4"> <!-- Ogg: régebbi alternatíva --> <source src="video.ogv" type="video/ogg"> <!-- Fallback szöveg régi böngészőknek --> A böngésződ nem támogatja a HTML5 videót. <a href="video.mp4">Töltsd le a videót</a> </video>`

#### Videó formátumok

- MP4 (H.264): Legjobb kompatibilitás, minden böngésző támogatja
- WebM (VP8/VP9): Nyílt forráskódú, jó minőség/méret arány
- Ogg (Theora): Régebbi nyílt formátum, csökkenő támogatás
- Ajánlás: Mindig add meg az MP4-et, WebM opcionális kiegészítés

### Reszponzív videó

HTML + CSS - Reszponzív videó
`<!-- HTML --> <div class="video-container"> <video controls> <source src="video.mp4" type="video/mp4"> </video> </div> <!-- CSS --> <style> .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 arány */ height: 0; overflow: hidden; } .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>`

## Hang beágyazása: <audio> elem EMELT SZINT

Az `<audio>` elem hangfájlok lejátszására szolgál, hasonló attribútumokkal, mint a video elem.

### Alapvető használat

HTML - Audio elem
`<audio src="zene.mp3" controls> A böngésződ nem támogatja az audio elemet. </audio>`

### Audio attribútumok

HTML - Audio összes attribútummal
`<audio controls autoplay loop muted preload="auto"> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> <source src="music.wav" type="audio/wav"> A böngésződ nem támogatja a HTML5 hanglejátszást. </audio>`

#### Audio formátumok

- MP3: Univerzális támogatás, jó tömörítés, legjobb választás
- WAV: Veszteségmentes, nagy fájlméret, stúdió minőség
- Ogg Vorbis: Nyílt forráskódú alternatíva
- AAC: Apple eszközökön előnyös, jó tömörítés
- Ajánlás: MP3 elsődleges választás a kompatibilitás miatt

### Audio kontroll példák

HTML - Különböző audio kontrollok
`<!-- Alapértelmezett kontrollokkal --> <audio src="podcast.mp3" controls></audio> <!-- Automatikus ismétlő lejátszás (háttérzene) --> <audio src="background-music.mp3" autoplay loop muted></audio> <!-- Előtöltés nélkül (kattintásra indul) --> <audio src="sound-effect.mp3" controls preload="none"></audio>`

## Feliratok: <track> elem BÓNUSZ

A `<track>` elem feliratokat, alcímeket vagy leírásokat ad a videóhoz, ami elengedhetetlen az akadálymentességhez.

HTML - Feliratok hozzáadása
`<video controls> <source src="video.mp4" type="video/mp4"> <!-- Magyar feliratok --> <track src="feliratok-hu.vtt" kind="subtitles" srclang="hu" label="Magyar" default> <!-- Angol feliratok --> <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English"> <!-- Audio leírás vak felhasználóknak --> <track src="audio-description.vtt" kind="descriptions" srclang="hu" label="Audio leírás"> </video>`

Kind érték | Jelentés | Használat
--- | --- | ---
`subtitles` | Feliratok | Beszéd szöveges megjelenítése (más nyelv)
`captions` | Kódolt feliratok | Beszéd + hangeffektek leírása (halláskárosultaknak)
`descriptions` | Leírások | Vizuális elemek audio leírása (vakoknak)
`chapters` | Fejezetek | Navigációs címek a videóban
`metadata` | Metaadatok | Script számára, nem jelenik meg

### WebVTT felirat formátum

WebVTT - Felirat fájl példa (feliratok-hu.vtt)
`WEBVTT 00:00:00.000 --> 00:00:05.000 Üdvözöllek az Elit Hardver bemutató videójában! 00:00:05.500 --> 00:00:10.000 Ma megmutatjuk neked a legújabb processzorokat. 00:00:10.500 --> 00:00:15.000 Az Intel Core i9 14900K csúcsteljesítményt nyújt.`

## YouTube videók beágyazása BÓNUSZ

A YouTube videók beágyazásához az `<iframe>` elemet használjuk. Ez lehetővé teszi, hogy egy másik weboldal tartalmát ágyazd be a sajátodba.

### YouTube beágyazási kód

HTML - YouTube videó beágyazása
`<!-- YouTube videó alapértelmezett mérettel --> <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube videó lejátszó" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>`

#### YouTube videó ID megtalálása

A YouTube videó URL-je: `https://www.youtube.com/watch?v=dQw4w9WgXcQ`

Az embed URL: `https://www.youtube.com/embed/dQw4w9WgXcQ`

A vastagon szedett rész a videó ID, amit be kell helyettesítened.

### YouTube beágyazási paraméterek

HTML - YouTube paraméterekkel
`<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=VIDEO_ID&controls=0&modestbranding=1&rel=0&start=10" width="560" height="315" frameborder="0" allowfullscreen> </iframe>`

Paraméter | Érték | Jelentés
--- | --- | ---
`autoplay` | 0 / 1 | Automatikus lejátszás (1 = igen)
`mute` | 0 / 1 | Néma indítás (autoplay-hez ajánlott)
`loop` | 0 / 1 | Ismétlő lejátszás (playlist kell hozzá)
`controls` | 0 / 1 | Vezérlők megjelenítése (0 = elrejt)
`modestbranding` | 1 | YouTube logo minimalizálása
`rel` | 0 / 1 | Kapcsolódó videók (0 = csak saját csatornából)
`start` | másodperc | Kezdési időpont (pl. start=30)
`playlist` | VIDEO_ID | Loop-hoz kötelező, add meg a videó ID-t

### Reszponzív YouTube videó

HTML + CSS - Reszponzív YouTube embed
`<!-- HTML --> <div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen> </iframe> </div> <!-- CSS --> <style> .video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 arány */ height: 0; overflow: hidden; max-width: 100%; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } </style>`

## Google Maps beágyazása BÓNUSZ

A Google Maps térképek beágyazása szintén iframe elemmel történik.

### Google Maps embed kód generálása

#### Lépések a Google Maps embed kód megszerzéséhez

1. Nyisd meg a Google Maps oldalt
2. Keresd meg a kívánt helyet
3. Kattints a Megosztás gombra
4. Válaszd a Térkép beágyazása fület
5. Másold ki a megjelenő HTML kódot

HTML - Google Maps beágyazás
`<!-- Alapértelmezett Google Maps embed --> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2695.512556216725!2d19.051390315773564!3d47.497912979175555!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741dc14b1c8e5b9%3A0x400c4290c1e11e0!2sBudapest!5e0!3m2!1shu!2shu!4v1234567890123!5m2!1shu!2shu" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> </iframe>`

### Reszponzív Google Maps

HTML + CSS - Reszponzív Google Maps
`<!-- HTML --> <div class="map-container"> <iframe src="https://www.google.com/maps/embed?pb=..." allowfullscreen="" loading="lazy"> </iframe> </div> <!-- CSS --> <style> .map-container { position: relative; padding-bottom: 56.25%; /* 16:9 vagy 75% a 4:3-hoz */ height: 0; overflow: hidden; } .map-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } </style>`

## Iframe elem - Általános használat BÓNUSZ

Az `<iframe>` (inline frame) elem lehetővé teszi másik HTML oldal beágyazását a dokumentumba.

### Iframe alapvető attribútumai

HTML - Iframe attribútumok
`<iframe src="https://example.com" width="800" height="600" title="Beágyazott oldal leírása" name="iframe1" sandbox="allow-scripts allow-same-origin" loading="lazy" referrerpolicy="no-referrer"> </iframe>`

Attribútum | Jelentés | Használat
--- | --- | ---
`src` | Forrás URL | Beágyazandó oldal címe
`width` | Szélesség | Pixelben vagy százalékban
`height` | Magasság | Pixelben vagy százalékban
`title` | Leírás | Akadálymentesség - képernyőolvasóknak
`sandbox` | Biztonsági korlátozások | Extra korlátozások a beágyazott tartalomra
`loading` | Betöltési stratégia | lazy / eager
`allowfullscreen` | Teljes képernyő engedély | Videók teljes képernyős lejátszása

### Sandbox attribútum - Biztonság

A `sandbox` attribútum korlátozza a beágyazott tartalom képességeit biztonsági okokból:

HTML - Sandbox értékek
`<!-- Szigorú sandbox (semmi sem engedélyezett) --> <iframe src="untrusted.html" sandbox></iframe> <!-- Engedélyek megadása --> <iframe src="page.html" sandbox="allow-scripts allow-same-origin allow-forms"> </iframe>`

Sandbox érték | Engedély
--- | ---
`allow-scripts` | JavaScript futtatása
`allow-same-origin` | Ugyanolyan origin-ként kezelés
`allow-forms` | Űrlapok küldése
`allow-popups` | Felugró ablakok nyitása
`allow-top-navigation` | Főablak navigációja

#### Iframe biztonsági figyelmeztetések

- ❌ Ne ágyazz be nem megbízható tartalmat - biztonsági kockázat!
- ✅ Használd a sandbox attribútumot - korlátozza a képességeket
- ✅ HTTPS használata: Mindig használj https:// protokollt
- ⚠️ Allow-same-origin + allow-scripts veszélyes - sandbox kikerülhető
- ✅ Title attribútum kötelező - akadálymentességhez szükséges

## Gyakorlati példák BÓNUSZ

### Példa 1: Termék bemutató videó

HTML - Termék videó teljes kóddal
`<section class="product-video"> <h2>Intel Core i9 14900K Bemutató</h2> <div class="video-container"> <video controls poster="cpu-cover.jpg"> <source src="cpu-demo.mp4" type="video/mp4"> <source src="cpu-demo.webm" type="video/webm"> <track src="hu-subtitles.vtt" kind="subtitles" srclang="hu" label="Magyar" default> <track src="en-subtitles.vtt" kind="subtitles" srclang="en" label="English"> A böngésződ nem támogatja a HTML5 videót. </video> </div> <p>Nézd meg részletes videónkat az i9 14900K teljesítményéről!</p> </section>`

### Példa 2: YouTube videó galéria

HTML - YouTube galéria
`<section class="video-gallery"> <h2>Bemutató Videók</h2> <div class="videos-grid"> <!-- Videó 1 --> <div class="video-item"> <h3>PC építés kezdőknek</h3> <div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/VIDEO_ID_1" title="PC építés útmutató" frameborder="0" allowfullscreen> </iframe> </div> </div> <!-- Videó 2 --> <div class="video-item"> <h3>CPU hűtő telepítés</h3> <div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/VIDEO_ID_2" title="Hűtő telepítési útmutató" frameborder="0" allowfullscreen> </iframe> </div> </div> </div> </section>`

### Példa 3: Kapcsolat oldal térképpel

HTML - Kapcsolat oldal Google Maps-szel
`<section class="contact-section"> <h2>Látogass el hozzánk!</h2> <div class="contact-info"> <p><strong>Cím:</strong> 1234 Budapest, Példa utca 10.</p> <p><strong>Telefon:</strong> +36 30 123 4567</p> <p><strong>Email:</strong> info@elithardver.hu</p> </div> <div class="map-container"> <iframe src="https://www.google.com/maps/embed?pb=..." title="Elit Hardver telephelyének térképe" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> </iframe> </div> </section>`

## Teljesítmény optimalizálás BÓNUSZ

#### Multimédia optimalizálási tippek

- ✅ Lazy loading: Használd a loading="lazy" attribútumot iframe-eknél
- ✅ Poster kép: Video elemhez mindig adj meg poster képet
- ✅ Preload stratégia: metadata vagy none a legtöbb esetben
- ✅ Videó tömörítés: Optimalizáld a videókat lejátszás előtt (HandBrake, FFmpeg)
- ✅ Több formátum: Adj meg MP4 + WebM kombinációt
- ✅ CDN használat: Nagyobb videóknál használj CDN szolgáltatást
- ✅ Reszponzív beágyazás: CSS-sel tedd reszponzívvá az iframe-eket
- ⚠️ Autoplay kerülése: Ne használj autoplay-t, kivéve muted módban

## Összefoglalás

Ebben a cikkben megismerkedtél a HTML multimédia beágyazás eszközeivel:

- Video elem: Natív videó lejátszás HTML5-ben, controls, autoplay, poster attribútumokkal
- Audio elem: Hangfájlok lejátszása hasonló vezérlésekkel
- Source elemek: Több formátum megadása böngésző kompatibilitáshoz
- Track elem: Feliratok és akadálymentességi szolgáltatások (WebVTT)
- YouTube beágyazás: Iframe használata video ID-val, paraméterek testreszabása
- Google Maps: Térkép beágyazása iframe elemmel
- Iframe biztonság: Sandbox attribútum és best practices
- Reszponzív beágyazás: CSS technikák 16:9 arány megőrzésére
- Teljesítmény: Lazy loading, preload stratégia, optimalizálás

#### Példák a weboldalunkon

Nézd meg, hogyan használjuk a multimédia elemeket a gyakorlatban:

- Termékbemutatók - Itt is beágyazhatnánk YouTube videókat iframe-mel (példa célra)
- Hűtés oldal - Audio példák lehetnének ventilátorzajokról
- Kapcsolat oldal - Google Maps térkép beágyazása iframe használatával

#### Következő lépések

Gyakorold az itt tanultakat: ágyazz be egy saját videót több formátumban, adj hozzá feliratokat, próbálj ki YouTube videókat különböző paraméterekkel, és készíts egy kapcsolat oldalt Google Maps térképpel!

Következő cikk: Űrlapok HTML-ben - Átfogó útmutató az űrlap elemekről: input típusok, label, select, textarea, validációs attribútumok és a GET/POST metódusok közötti különbségek!