# Videó blokk

> Videó feltöltése és beágyazása: eszköztár, felirat, szöveges sávok, lejátszási beállítások, előtöltés és poszterkép.

A **Videó** blokkal videót tölthetsz fel és ágyazhatsz be az oldaladba vagy a bejegyzésedbe.

## A blokk hozzáadása

Kattints a **+** (blokkbeszúró) gombra, és válaszd a **Videó** blokkot. Egy új, üres Bekezdés blokkban a `/videó` (vagy `/video`) beírása és az enter is létrehozza.

A blokk először három lehetőséget kínál a videó megadására:

- **Feltöltés**: új videófájlt töltesz fel a számítógépedről.
- **Médiatár**: a Médiatárban már meglévő videót választasz.
- **Beillesztés URL-ből**: megadod egy videó webcímét. Ha a webcím támogatott szolgáltatásé, például YouTube-é, a Videó blokk magától beágyazott (embed) blokká alakul.

![A Videó blokk kijelölve: lejátszó és eszköztár](./kepek/blokkok-video-szerkeszto.webp)

*A Videó blokk kijelölve: lejátszó és eszköztár* (https://minta-bolt.hu/wp-admin/post.php?post=16&action=edit)

A képen a beillesztett videó látszik, fölötte az eszköztárral (**Szöveges sávok**, **Csere**).

## A Videó blokk eszköztára

Az eszköztár gombjai: **Videó** (átalakítás), **Húzás**, **Mozgatás fel** és **Mozgatás le**, **Igazít**, a felirat kapcsolója, **Szöveges sávok**, **Csere** és **Beállítások** (három pont).

### Átalakítás

A **Videó** gombbal a blokkot GIF-változattá, Csoporttá, Borítóképpé, Média és szöveg blokkká, Oszlopokká, Részletekké vagy Fájl blokká alakíthatod.

### Húzás és mozgatás

A **Húzás** gombbal (hat pont) szabadon áthelyezheted a blokkot az oldalon: tartsd lenyomva, és húzd az új helyére. A **Mozgatás fel** és **Mozgatás le** nyilakkal egy lépéssel feljebb vagy lejjebb viheted, akár egymásba ágyazott blokkok között is.

### Igazítás

Az **Igazít** gombbal a videó méretét és helyét választhatod meg:

- **Nincs**: a blokk megtartja a méretét.
- **Széles**: a tartalom szélességénél szélesebb blokk.
- **Teljes szélesség**: a blokk a képernyő teljes szélességét kitölti.
- **Balra**, **Középre**, **Jobbra**: a blokk a megfelelő oldalra kerül.

A **Széles** és a **Teljes szélesség** csak akkor jelenik meg, ha a témád támogatja.

### Felirat

A felirat kapcsolójával a videó alatti feliratot kapcsolhatod be vagy ki. A feliratban használhatsz félkövér és dőlt formázást, és linket is elhelyezhetsz.

### Szöveges sávok

A **Szöveges sávok** gombbal időzített szövegeket (például feliratot) adhatsz a videóhoz, amelyek lejátszás közben jelennek meg. A sávok WebVTT formátumúak (`.vtt` kiterjesztésű fájlok). Egy ilyen fájl így néz ki:

```text
WEBVTT

NOTE Rövid megjegyzés a fájl elején.

0:02:14.000 --> 0:02:15.000
Jó napot!

0:02:16.000 --> 0:02:17.000
Üdvözlöm önöket.
```

Miután feltöltöttél egy sávot, a sáv szerkesztésénél ezeket adhatod meg:

- a **címke**: a sáv olvasható neve, amelyet a böngésző a választható sávok listájában mutat;
- a **forrásnyelv**: a sáv szövegének nyelve, érvényes BCP 47 nyelvkóddal (például `hu`). Ha a fajta feliratok, a forrásnyelvet kötelező megadni;
- a **fajta**: a sáv felhasználási módja. Ha nem adod meg, az alapértelmezés a felirat. Érvénytelen érték esetén a sáv metaadat lesz.

A sáv fajtái:

- **Felirat** (subtitles): a videóbeli beszéd fordítása azoknak, akik hallják, de nem értik a nyelvet. A felirat a videón jelenik meg.
- **Átirat** (captions): a beszéd, a hangeffektek és a zenei jelzések leírása hallássérülteknek vagy elnémított videóhoz. Ez is a videón jelenik meg.
- **Leírás** (descriptions): a videóban látottak szöveges leírása azoknak, akik nem látják a képet, például segítő technológiával. Képernyőolvasó olvassa fel, vagy külön hangsávvá alakítják.
- **Fejezetek** (chapters): fejezetcímek a videón belüli navigációhoz, jellemzően kattintható fejezetlistaként.
- **Metaadat**: a JavaScript számára szánt adat, a látogató nem látja.

### Csere

A **Csere** gombbal másik videót választhatsz: megnyithatod a Médiatárat, feltölthetsz új fájlt, vagy megadhatod a jelenlegi médiafájl webcímét.

### Beállítások (három pont)

A három pontos menüből másolhatod, kettőzheted, törölheted a blokkot, vagy HTML-ként szerkesztheted.

## A Blokk fül beállításai

Ha nem látod az oldalsávot, kattints a **Beállítások** gombra a **Közzététel** gomb mellett. Ha a blokkban már van videó, két belső fül jelenik meg: **Beállítások** (fogaskerék) és **Stílusok** (félig kitöltött kör). A blokk tetején az **Átalakítás változattá** gombbal a Videó blokkot GIF-változattá alakíthatod, és vissza.

![A Videó blokk Beállítások füle](./kepek/blokkok-video-beallitasok.webp)

*A Videó blokk Beállítások füle* (https://minta-bolt.hu/wp-admin/post.php?post=16&action=edit)

A képen a **Beállítások** fül látszik az **Automatikus lejátszás**, **Ciklus**, **Némítva**, **Lejátszás vezérlés**, **Beágyazott lejátszás**, **Előtöltés** és **Poszterkép** beállításokkal.

### Beállítások fül

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Automatikus lejátszás** | A videó magától elindul, amikor valaki megnyitja az oldalt. | Ki |
| **Ciklus** | A videó a végén újraindul. | Ki |
| **Némítva** | A videó hang nélkül játszik, ha erre van szükséged. | Ki |
| **Lejátszás vezérlés** | A lejátszóvezérlők megjelenítése vagy elrejtése a videón. Kikapcsolva a videón nincsenek vezérlők. | Be |
| **Beágyazott lejátszás** | A videó az oldalon belül játszódik le mobilböngészőben, nem teljes képernyőn. Ha kikapcsolod, az nem jelenti azt, hogy a videó mindig teljes képernyőn indul. | Ki |
| **Előtöltés** | Megadja, mennyit tölt le a böngésző a videóból az oldal betöltésekor. | **Meta adat** |
| **Poszterkép** | A lejátszás előtt megjelenő kép. | Nincs |

Az **Előtöltés** három értéke:

- **Automatikus**: a teljes videófájl letöltődik, akkor is, ha a látogató nem indítja el. Ez lassítja leginkább az oldalt, főleg nagy videóknál.
- **Meta adat**: csak a fájl alapadatai töltődnek le, a videó a lejátszás indításakor. Ez nagyon gyors.
- **Semmi**: semmi sem töltődik le előre, a letöltés a lejátszás gombra kattintva kezdődik. Ez a leggyorsabb.

A **Meta adat** és a **Semmi** között alapvetően nincs nagy különbség. A teljes fájl előzetes letöltése lassíthatja az oldal betöltését.

A **Poszterkép beállítása** gombbal választhatsz képet, amely a lejátszás előtt látszik. Ez akkor hasznos, ha a videó első képkockája nem szép vagy nem árulkodik a tartalomról. Egy figyelemfelkeltő poszterkép a videóra irányíthatja a látogatók figyelmét.

A **Haladó** panelen a HTML-horgony, a további CSS-osztályok, a további CSS és a stílusok állíthatók.

### Stílusok fül

A **Stílusok** fülön a **Méretek** panelen a helykitöltést (belső margó) és a margót (külső távolság) adhatod meg.