# Videó megjelenítése a listában

> Videó a médiatárból vagy a YouTube-ról, Dynamic Field és Video widget használatával, valamint videók listája ismétlő mezőből.

A **Média** típusú metamező nem alkalmas videó megjelenítésére, ezért a videót a webcíme alapján, szöveges metamezőből jeleníted meg. Ez a fejezet a három módszert mutatja: videó a médiatárból, videó a YouTube-ról vagy Vimeóról, és több videó egy ismétlő mezőből.

## Videó a médiatárból

### Metamező

Vegyél fel egy **Szöveg** típusú metamezőt az egyéni bejegyzéstípushoz (vagy az alap bejegyzésekhez: ehhez a **JetEngine → Metaboxok** oldalon hozz létre metaboxot, és rendeld a bejegyzésekhez).

### A videó feltöltése és a cím bevitele

1. A **Média → Új hozzáadása** oldalon töltsd fel a videót a merevlemezedről.
2. Kattints a feltöltött videóra, és másold ki a jobb oldali sávban látható webcímet.
3. Szerkeszd a bejegyzést, írd be a címet a metamezőbe, és kattints a **Frissítés** gombra.

### Megjelenítés a listában

A listázási sablonban kétféle módon jeleníthető meg.

**HTML-kóddal (Dynamic Field):**

1. Húzz be egy **Dynamic Field** widgetet. A **Source** legyen **Meta Data**, a **Meta Field** pedig a videócímet tartalmazó mező.
2. Kapcsold be a **Customize field output** kapcsolót, és a **Field format** szövegmezőbe írj egy `<video>` HTML-kódot, amelyben a forrás helyén a `%s` jelölő áll. Így minden elem a saját metamezőjének értékét kapja, nem ugyanazt a videót.

```html
<video controls width="100%">
  <source src="%s" type="video/mp4">
</video>
```

A forrássor típusa a videó formátumától függ: `.mp4` esetén `video/mp4`, `.ogv` esetén `video/ogg`, `.webm` esetén `video/webm`.

**Video widgettel (Elementor):**

1. Húzz be egy **Video** widgetet, a **Source** legyen **Self Hosted**.
2. Kapcsold be az **External URL** kapcsolót, és kattints a mező jobb oldalán a **Dynamic tags** gombra.
3. Válaszd a JetEngine **Custom Field** címkét, majd kattints újra a mezőre, és a **Field** listából válaszd ki a videócímet tartalmazó metamezőt.
4. A lejátszás további beállításait szabd testre.

## Videó harmadik fél szolgáltatójától

1. Vegyél fel **Szöveg** típusú metamezőt, és minden bejegyzés mezőjébe írd be a YouTube- vagy Vimeo-videó webcímét.
2. A **JetEngine → Listázások/komponensek** oldalon hozz létre sablont, és nyisd meg az Elementorban.
3. Húzz be egy **Dynamic Field** widgetet, a **Source** legyen **Meta Data**, a **Meta Field** a webcímet tartalmazó mező.
4. Kapcsold be a **Filter field output** kapcsolót, és a **Callback** legyen **Embed URL**.
5. A **Style** fülön a megjelenést tovább szabhatod.

## Több videó ismétlő mezőből

Ha egy bejegyzéshez több videó tartozik, **Ismétlő** típusú metamezőt használj, és a videókat az egyedi bejegyzés oldalán listázd.

### Háttérbeállítás

1. Az ismétlő mezőt kétféleképpen veheted fel: a **JetEngine → Metaboxok** oldalon metaboxban (bejegyzéstípusokhoz, taxonómiákhoz, felhasználókhoz vagy WooCommerce-termékekhez), vagy közvetlenül az egyéni bejegyzéstípusnál.
2. A bejegyzéstípus szerkesztőjében a **Metamezők** részben kattints az **Új metamező** gombra, add meg a **Címkét** és a **Név/azonosító** mezőt, a **Mező típusa** legyen **Repeater**.
3. Kattints az **Új ismétlő mező** gombra, adj meg címkét és nevet, a típus legyen **Szöveg**. Ide kerülnek a YouTube-webcímek. Több almezőt is felvehetsz.
4. Mentsd a bejegyzéstípust az **Update Post Type** gombbal.
5. Szerkeszd a bejegyzéseket, és illeszd be a videócímeket az ismétlő sorokba.

### A listázási sablon

1. A **JetEngine → Listázások/komponensek** oldalon kattints az **Új elem hozzáadása** gombra, a **Lista forrása** legyen **Ismétlő mező**.
2. Állítsd be: **Bejegyzéstípusból** (az a típus, amelyhez az ismétlőt felvetted), **Ismétlő forrása** (**JetEngine**, **JetEngine-opciók oldala** vagy **ACF**), **Ismétlődő mező** (az ismétlő neve), a sablon neve és a **Listázási nézet** (Elementor vagy Gutenberg). Kattints a **Listázási elem létrehozása** gombra.
3. **Elementor:** húzz be egy **Dynamic Field** widgetet, a **Source** legyen **Repeater Field**, az **Object field / Meta field / Repeater key / Component prop** mezőbe írd a szöveges almező nevét. Kapcsold be a **Filter field output** kapcsolót, a **Callback** legyen **Embed URL**. Stílusban például a **Field content width** lehet **Full width**.
4. **Blokkszerkesztő:** ugyanezt a **Dynamic Field** blokkban állítsd be: **Source** = **Repeater Field**, az almező neve, **Filter field output** és **Callback** = **Embed URL**. A stílusbeállításokhoz telepítsd és aktiváld a JetStyleManager bővítményt, majd az ecset ikonnal nyisd meg a beállításokat.
5. Mentsd a sablont a **Közzététel** (blokkszerkesztőben **Mentés**) gombbal.

### Megjelenítés az egyedi bejegyzés oldalán

Az ismétlő forrású sablont tartalmazó **Listing Grid** csak az egyedi bejegyzés (Single Post) oldalán jeleníthető meg.

1. Szerkeszd az egyedi bejegyzés sablont abban a szerkesztőben, amelyben készült (JetThemeCore vagy Elementor Pro).
2. Húzd be a **Listing Grid** widgetet vagy blokkot, és a **Listing** listából válaszd ki az ismétlő sablonját.
3. Állítsd be az oszlopok és az elemek számát, majd mentsd a sablont.

Az ismétlő mezőkről bővebben a [Ismétlő mezők](https://hub.hellowp.io/hu/plugins/jet-engine/meta-mezok-ismetlo-mezok/) fejezetben olvashatsz.