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

Nyisd meg a Google Maps oldalt
Keresd meg a kívánt helyet
Kattints a Megosztás gombra
Válaszd a Térkép beágyazása fület
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!