# Videólejátszási lista widget

> A Videólejátszási lista widget: videóforrások (egyéni lista, YouTube, ismétlődő mező), beállítások és stílus.

A **Videólejátszási lista** (Video Playlist) widget YouTube- vagy Vimeo-videókból készít lejátszási listát az Elementorban. Kiválaszthatod a videók forrását, a lista hosszát, mit mutasson (cím, dátum, időtartam), és stílusozhatod a vászon, a címsor, a bélyegképek és a görgetősáv megjelenését.

## Bekapcsolás és beillesztés

1. A **Crocoblock → JetPlugins Settings → JetBlog** oldal **Elérhető widgetek** lapján kapcsold be a **Videólejátszási lista** kapcsolót. Csak a szükséges widgeteket hagyd bekapcsolva, mert a sok aktív widget lassíthatja az oldalt.
2. Az Elementor szerkesztőben húzd a widgetet az oldalra, a bejegyzésre vagy a sablonra.

![A próbaoldalon a Videólejátszási lista: balra a lejátszó, jobbra a videók listája sorszámmal és időtartammal](./kepek/widgetek-1-proba-oldal.webp)

*A próbaoldalon a Videólejátszási lista: balra a lejátszó, jobbra a videók listája sorszámmal és időtartammal* (https://minta-bolt.hu/jetblog-proba/)

A képen a lista jobb oldalán a címsor, a videók darabszáma, a sorszámok, a bélyegképek és az időtartam látszik.

## Videók forrása

A **Tételek** fülön a **Forrás** listából három közül választhatsz.

> A YouTube-videók adatainak (cím, időtartam, dátum) lekéréséhez Google API-kulcs kell. A kulcsot a Google Developers Console API-irányítópultján hozhatod létre, és a **Crocoblock → JetPlugins Settings → JetBlog → Általános beállítások → YouTube API-kulcs** mezőbe kell beillesztened.

### Egyéni videólista

Itt a videókat kézzel adod meg, a **+ Elem hozzáadása** gombbal újabb tételt veszel fel. Egy tétel mezői:

| Mező | Mit csinál |
|---|---|
| **Cím** | A videó címe. Ha üresen hagyod, a rendszer a YouTube-ról vagy a Vimeóról kéri le (érvényes API-kulcs kell hozzá). JetEngine dinamikus címkével is kitölthető. |
| **URL** | A videó linkje, kötelező. YouTube- és Vimeo-linkek, valamint JetEngine dinamikus címkék használhatók. |
| **Kezdési idő (másodpercben)** | Melyik másodpercnél induljon a videó, például a 30 a 00:30-nál. Nem kötelező. |
| **Egyéni bélyegkép** | A „+” ikonnal a médiatárból választasz vagy feltöltesz képet. Ha nem adsz meg, az alapértelmezett bélyegkép látszik (ha az API-n át elérhető). Dinamikus címkével is megadható. Kép megadása után megjelenik a **Bélyegkép mérete** lista. |

### YouTube-csatorna vagy lejátszási lista

Itt a **Forrás-URL** mezőbe egy YouTube-csatorna vagy lejátszási lista linkjét írod be kézzel vagy JetEngine dinamikus címkével, a **Videók száma** mezőben pedig azt, hány videót mutasson.

### Ismétlődő mező

Ez a forrás a JetEngine-nel vagy az ACF-fel létrehozott „Ismétlődő” (Repeater) metamező videóit jeleníti meg. A widgetet listázósablonba vagy önálló oldalra kell tenned. A mezők:

- **Ismétlődő meta neve**: az ismétlődő metamező neve;
- **URL almező neve**: a videó URL-jét tartalmazó almező neve;
- **Cím almező neve**: a videó címét tartalmazó almező neve; üresen is hagyható.

Az ismétlődő mező előkészítése (JetEngine metamezővel):

1. Hozz létre egy új metamezőt az **Új metamező** gombbal, add meg a címkéjét és a nevét/azonosítóját, a mezőtípus legyen **Ismétlődő**.
2. Az **Új ismétlődő mező** gombbal vegyél fel két **Szöveg** típusú almezőt: az egyik a videó URL-jét, a másik a videó címét tartalmazza (ez utóbbi nem kötelező).
3. Mentsd a beállításokat.
4. Hozz létre egy új bejegyzést, és töltsd ki az ismétlődő elemek mezőit a videók címével és URL-jével.
5. A widgetnél az almezők nevét írd be a fent leírt mezőkbe.

Az ismétlődő metamező bejegyzéshez, taxonómiához és felhasználóhoz is hozzáadható a metadoboz funkcióval.

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

| Beállítás | Mit csinál |
|---|---|
| **Lejátszási lista magassága** | A lista magassága (nem mobil eszközökön). |
| **Bélyegképek tájolása** | Függőleges vagy vízszintes bélyegképek. |
| **Bélyegképek pozíciója** | A bélyegképek listája balra vagy jobbra áll. |
| **Bélyegképlista szélessége (%)** | A bélyegképlista szélessége (nem mobil eszközökön). |
| **Bélyegképek címsorának megjelenítése** | A lista címsorát mutatja vagy rejti. |
| **Címsor szövege** | A címsor szövege, például „Videólejátszási lista”. |
| **Címsor ikonja** | SVG-fájl feltöltése vagy ikon választása a címsor mellé. |
| **Videószámláló megjelenítése** | A videók számát mutatja a listában. |
| **Számláló utótag** | A szám után álló szó, például „videó”. |
| **Videó közzétételi dátumának megjelenítése** | Megmutatja a videó közzétételi dátumát (API-kulcs kell). Bekapcsolva két további beállítást ad: a **Közérthető dátumkülönbség** a pontos dátum helyett például „3 napja” formát ír; a **Dátumformátum** a WordPress/PHP dátumformázási szabályai szerint adja meg a formátumot (például az `F j, Y` formátum „August 18, 2025” alakot ad). |
| **Elem sorszámának és állapotának megjelenítése** | Kiírja a videók sorszámát és lejátszási állapotát. |
| **Index elrejtése eszközön** | Az indexet elrejti a választott eszközön: asztali gép, táblagép álló helyzetben, mobil álló helyzetben. |
| **Elem időtartamának megjelenítése** | Kiírja a videók hosszát. |
| **Időtartam elrejtése eszközön** | Az időtartamot elrejti a választott eszközökön. |
| **Bélyegkép elrejtése eszközön** | A bélyegképet elrejti a választott eszközökön. |
| **Görgetősáv megjelenítése csak rámutatáskor** | A görgetősáv csak akkor látszik, ha az egeret a lista fölé viszed. |
| **Gyorsítótárazás letiltása** | A widget minden betöltéskor újra lekéri a videók adatait az API-ból. Hibakereséshez használd, egyébként nem ajánlott. |

## A YouTube API gyorsítótárának ideje

A bővítmény a YouTube API válaszait alapból hat órán át gyorsítótárazza, hogy kevesebb API-kérés menjen el, és gyorsabb legyen az oldal. Ha frissebb adatot akarsz, vagy hosszabb ideig tárolnál, a lejárati időt szűrőkkel módosíthatod.

### A gyorsítótár működésének ellenőrzése

1. Töröld a meglévő átmeneti adatokat (transient). Ehhez telepíthetsz egy átmeneti adatokat törlő bővítményt, például a Delete Expired Transients nevűt, majd az **Eszközök → Delete Transients** oldalon válaszd az összes átmeneti adat törlését.
2. Nyisd meg a Videólejátszási lista widget beállításait, és a **Gyorsítótárazás letiltása** kapcsolót hagyd kikapcsolva.
3. Tedd közzé az oldalt, és nyisd meg a weboldalon. Az első betöltéskor kérések mennek a YouTube API felé.
4. Töltsd újra az oldalt: most már nem megy kérés, mert az adatok a gyorsítótárból jönnek.

### A lejárati idő átállítása

Add hozzá az aktív téma `functions.php` fájljához a következő kódot. A példa a gyorsítótár idejét egy órára állítja (az érték órában értendő):

```php
add_filter( 'jet_blog_list_cache_ttl_hours', fn( $h ) => 1 );
add_filter( 'jet_blog_video_cache_ttl_hours', fn( $h ) => 1 );
```

A két szűrő a Videólejátszási lista videóadatainak tárolási idejét adja meg. A beállított idő letelte után a widget a következő betöltéskor friss adatot kér a YouTube API-tól, utána újra a gyorsítótárból dolgozik.

## Stílus fül

A **Stílus** fülön ezek a részek vannak: **Általános beállítások**, **Bélyegkép stílusa**, **Bélyegképek sorszáma és állapotikonjai** és **Görgetősáv stílusa**. Velük a vásznat, a címsorokat, a bélyegképeket, a burkolókat és a görgetősávot formázhatod.