# Videó

> Videó hozzáadása a termékhez, és megjelenítése a galériaelemekben.

A termékhez videót is rendelhetsz, amely a galéria képei mellett jelenik meg. Mind a négy galériaelem kezeli a videót. A videó lehet YouTube- vagy Vimeo-hivatkozás, illetve a saját weboldalra feltöltött fájl (például MP4 vagy WebM).

Egy termékhez egy videó adható meg.

## 1. lépés: a videó megadása a terméken

1. Nyisd meg a **Termékek** listát, és szerkeszd meg a kívánt terméket.
2. A szerkesztő jobb oldali sávjában keresd meg a **Jet Product Gallery Video** dobozt.
3. A **Videó típusa** listából válassz: „YouTube”, „Vimeo” vagy saját feltöltés („Self Hosted”).
4. A **Videó poszterképe** alatt a **Poszter kiválasztása** gombbal válassz borítóképet. Ez jelenik meg a galériában a videó helyén.
5. Írd be a **Videó-URL** mezőbe a videó címét. Saját feltöltésnél itt a videófájlt választod ki.
6. Kapcsold be vagy ki a lejátszó vezérlőit (lásd lent).
7. Kattints a **Frissítés** gombra.

![A termékszerkesztő Jet Product Gallery Video doboza](./kepek/termek-video-mezo.webp)

*A termékszerkesztő Jet Product Gallery Video doboza* (https://minta-bolt.hu/wp-admin/post.php?post=21&action=edit)

A képen a videó típusa, a poszterkép és az URL mező, alatta a lejátszóvezérlők kapcsolói látszanak.

### Lejátszóvezérlők

Amelyik vezérlőt kikapcsolod, az nem jelenik meg a lejátszón. A felkínált kapcsolók a videó típusától függenek:

- **YouTube és Vimeo:** **Natív vezérlők mutatása**, **Teljes képernyős gomb mutatása**, Vimeónál még **Lejátszásvezérlők mutatása**, **Cím mutatása**, **Szerző nevének mutatása** és **Szerző avatarjának mutatása**. A **Lejátszásvezérlők mutatása** mellett az áll, hogy kikapcsolva az automatikus lejátszás használható a Vimeo-videók indításához.
- **Saját feltöltés:** **Lejátszás/szünet gomb mutatása**, **Aktuális idő mutatása**, **Folyamatjelző sáv mutatása**, **Időtartam mutatása**, **Hangerőszabályzó mutatása** és **Teljes képernyős gomb mutatása**.

## 2. lépés: a videó megjelenítése a galériaelemben

A videót használó elem egy termékoldal-sablonban vagy bármely oldalon lehet. A példában a Galéria-diavetítést használjuk, de a többi elem is ugyanígy működik.

1. Húzd be az elemet, és az **Általános** szekcióban válaszd a „WooCommerce-termékek” forrást.
2. Add meg a **Termék ID**t annak a terméknek, amelyhez a videót rendelted. Egyedi termékoldal-sablonban a mező üresen is maradhat.
3. A termék képei és a videó is megjelennek.
4. Állítsd be a **Videó** szekciót (lásd lent), majd mentsd az oldalt.

Kézi választás és bejegyzéstípus-forrás esetén az **Általános** szekcióban külön kapcsolóval kapcsolható be a videó, ott a videó adatait (típus, URL, poszterkép) közvetlenül az elemnél adod meg.

## A Videó szekció beállításai

![A Videó szekció az Elementor panelen](./kepek/szerkeszto-csuszka-video.webp)

*A Videó szekció az Elementor panelen* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

| Beállítás | Mit csinál |
| --- | --- |
| **Videó megjelenítési helye** | „Tartalom”: a videó a képek mellett, a galéria részeként jelenik meg. „Popup”: a videó előugró ablakban nyílik. |
| **Képarány** | A videó képaránya (alapérték: 16:9). Csak YouTube- és Vimeo-videótípusokkal működik. |
| **Videó megjelenítése első helyen** | Bekapcsolva a videó az első a galériában, a képek előtt. Csak „Tartalom” megjelenítésnél látszik. |
| Prioritás (a kiemelt kép helyzete) | Megadja, hogy a kiemelt kép a videóhoz képest hol szerepeljen. Csak „Tartalom” megjelenítésnél látszik. |
| **Automatikus lejátszás** | A videó elindul, amint a látogató odalapoz. |
| **Némítás** | A videó hang nélkül indul. |
| **Ismétlés** | A videó a végén újraindul. |
| **Fedvény színe** | A fedvény színe, ha a videót előugró ablakban jeleníted meg. |
| **Lejátszógomb → Megjelenítés** | A lejátszógomb megjelenítése a videón; megadhatod a típusát (ikon vagy kép) és az ikont. |

Az előugró ablak gombjának ikonját is te választod ki.

## Videó a blokkszerkesztőben

A galériablokkok (például a Gallery Slider) ugyanígy kezelik a videót. A menet:

1. A termék szerkesztőjében add meg a videót (lásd az 1. lépést), és kattints a **Frissítés** gombra. Érdemes kimásolni a termék azonosítóját: a **Termékek** listában a termék nevére mutatva látszik.
2. Nyisd meg azt az oldalt, ahol a galéria megjelenik, és szúrd be a blokkot.
3. A **Source** mezőben válaszd a „WooCommerce Products” forrást, és add meg a **Product ID** értékét. Közönséges oldalon kötelező megadni, termékoldal-sablonban elhagyható.
4. Állítsd be az **Images** és a **Slider** fület, majd a **Video** fület.
5. Frissítsd az oldalt, és nézd meg a végeredményt a weboldalon.

A **Video** fül beállításai megegyeznek a fenti táblázatéval: a megjelenítés helye („Content” vagy „Popup”), a képarány, a videó első helyre tétele, az automatikus lejátszás, az ismétlés és a lejátszógomb. A lejátszógomb a videó borítóképének közepén jelenik meg, az ikonját a **Select Play Button Icon** gombbal választod ki.

A blokkok megjelenését a JetStyleManager bővítménnyel finomhangolhatod: telepítés és aktiválás után a szerkesztő jobb felső sarkában megjelenő ecset alakú gombbal nyílik a stílusbeállítás.

## Elementor: kapcsolók a Videó szekció mellett

Az **Általános** szekcióban a termékkép elhagyható (a kiemelt kép kikapcsolása), a nagyítás és a galéria (lightbox, kattintásra nagy képet nyit) külön kapcsolóval kapcsolható be. A **Kép** szekcióban a képméret és a bélyegkép mérete adható meg. A **Slider** szekcióban a lapozó típusát „Thumbnails” értékre állítva a bélyegképek a fő kép alatt jelennek meg.

## Bélyegképes lapozó

A diavetítésnél és a horgonyalapú navigációnál a videó a lapozóban is megjelenik bélyegképként. A bélyegképen a videó ikonját külön kiválaszthatod, és beállíthatod, hogy a bélyegkép látszódjon-e.