# Videó widget

> YouTube, Vimeo, Wistia, Bunny.net, Rumble és saját tárhelyű videó beágyazása: videóbeállítások, bélyegkép, lejátszógomb, kezdési és befejezési idő, videóséma, dupla kattintás mobilon.

A **Videó** widget videókat ágyaz be az oldalra úgy, hogy az oldal betöltésekor nem a lejátszót, hanem csak a videó bélyegképét tölti be. A lejátszó akkor töltődik be, amikor a látogató a lejátszógombra kattint, így a videó nem lassítja az oldalt.

A widget használata előtt győződj meg róla, hogy be van kapcsolva a **Widgetek** beállításai között (lásd: [Widgetek ki- és bekapcsolása](https://hub.hellowp.io/hu/plugins/ultimate-elementor/altalanos-widgetek-ki-be/)). Az Elementor szerkesztőben a **Videó** nevű widgetet találod.

![A Videó widget Tartalom paneljének Videó szakasza](./kepek/media-video-panel.webp)

*A Videó widget Tartalom paneljének Videó szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=17&action=elementor)

A képen a **Videó típusa**, a **Link**, a **Kezdés időpontja**, a **Befejezési idő** és a **Képarány** mező látszik, alatta a **Videóbeállítások**.

## Videótípusok

A **Videó típusa** listából választhatsz:

- **YouTube**
- **Vimeo**
- **Wistia**
- **Bunny.net**
- **Rumble**
- **Saját tárhelyen tárolt**

### A link megadása

Mindig a videó teljes, böngészőben látható URL-jét add meg, ne a megosztási (rövid) linket.

| Videó | Jó link | Rossz link |
| --- | --- | --- |
| YouTube | `https://www.youtube.com/watch?v=aqz-KE-bpKQ&t=3s` | `https://youtu.be/aqz-KE-bpKQ` |
| Vimeo | `https://vimeo.com/274860274` | `https://vimeo.com/channels/staffpicks/274860274` |

A **Wistia** típusnál nem URL kell, hanem a **Hivatkozás és bélyegkép szövege** mező. Ehhez a Wistiában kattints jobb gombbal a videóra, és válaszd az utolsó menüpontot, a **Link és bélyegkép másolása** parancsot, majd illeszd be a kapott szöveget a mezőbe. Ha a Wistiában később átírod a bélyegképet vagy a linket, a szöveget újra be kell másolnod a widgetbe.

### Saját tárhelyen tárolt videó

A **Saját tárhelyen tárolt** típusnál két forrás közül választhatsz:

- **Külső URL**: bekapcsolva egy külső helyen lévő videófájl címét írhatod be.
- **Fájl kiválasztása**: a médiatárban lévő videófájlt jelölheted ki.

Ennél a típusnál is használható a **Lightbox**, az **Automatikus lejátszás**, az **Ismétlés**, a **Lejátszóvezérlés** és a **Némítás**, és bélyegképet is beállíthatsz.

## Videóbeállítások

A **Videóbeállítások** a videótípustól függően változnak. Közös a **Lightbox** kapcsoló: bekapcsolva a videó felugró ablakban játszódik le.

### YouTube

| Beállítás | Mit csinál |
| --- | --- |
| **Automatikus lejátszás** | A videó az oldal betöltésekor magától elindul. |
| **Kapcsolódó videók innen** | A lejátszás végén ajánlott videók forrása: **Aktuális videócsatorna** (ugyanazon csatorna videói) vagy **Bármely véletlenszerű videó**. |
| **Lejátszóvezérlés** | Megjeleníti a lejátszás, szünet, hangerő, teljes képernyő és további vezérlőket. |
| **Némítás** | Elnémítja a videót. |
| **Visszafogott márkajelzés** | Elrejti a YouTube-logót a vezérlősávban. |
| **Adatvédelmi mód** | A YouTube csak akkor tárol adatot a látogatóról, ha elindítja a videót. |

A YouTube API változása miatt a videó címe és a csatorna neve nem rejthető el, és az ajánlott videók megjelenítése sem kapcsolható ki teljesen: a **Kapcsolódó videók innen** csak az ajánlások forrását szabályozza.

### Vimeo

| Beállítás | Mit csinál |
| --- | --- |
| **Automatikus lejátszás** | A videó az oldal betöltésekor magától elindul. |
| **Ismétlés** | A videó a végén újra elindul. |
| **Némítás** | Elnémítja a videót. |
| **Bevezető cím** | Megjeleníti a videó címét. |
| **Bevezető portré** | Megjeleníti a szerző profilképét. |
| **Bevezető szerzői név** | Megjeleníti a szerző nevét. |
| **Vezérlők színe** | A lejátszóvezérlők színe. |

### Wistia

| Beállítás | Mit csinál |
| --- | --- |
| **Automatikus lejátszás** | A videó az oldal betöltésekor magától elindul. |
| **Ismétlés** | A videó folyamatosan ismétlődik. |
| **Némítás** | Elnémítja a videót. |
| **Lejátszósáv megjelenítése** | Megmutatja az előrehaladást jelző sávot alul. |

## Kezdési és befejezési idő

A **Kezdés időpontja** és a **Befejezési idő** mezőbe másodpercben írhatod be, hol induljon és hol álljon meg a videó. A látogatónál a lejátszás a megadott kezdési időtől indul, és a befejezési időnél megáll.

- YouTube és saját tárhelyen tárolt videónál mindkét mező elérhető.
- Vimeónál csak a **Kezdés időpontja** érhető el.
- A **Wistia** típusnál nincs kezdési és befejezési idő.

A **Képarány** listából a **16:9**, **4:3**, **3:2**, **9:16**, **1:1** és **21:9** közül választhatsz.

## Bélyegkép és átfedés

A **Bélyegkép és átfedés** szakasz azt szabályozza, mi látszik a videó helyén lejátszás előtt.

![A Bélyegkép és átfedés szakasz](./kepek/media-video-belyegkep-panel.webp)

*A Bélyegkép és átfedés szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=17&action=elementor)

A képen az **Egyéni bélyegkép** kapcsoló bekapcsolt állapota látszik: ilyenkor megjelenik a **Kép kiválasztása**, a **Képfelbontás** és a **Fedvény színe** mező.

1. Nyisd meg a **Bélyegkép és átfedés** szakaszt.
2. Kapcsold be az **Egyéni bélyegkép** kapcsolót.
3. A **Kép kiválasztása** mezővel válassz egy képet a médiatárból.
4. A **Fedvény színe** mezővel állíts be a kép fölé színes réteget.

A **Bélyegkép mérete** a YouTube-videó automatikus bélyegképének minőségét adja meg, a **Keretsugár** a kép sarkainak lekerekítését.

Ha egyéni bélyegképet nem adsz meg, a videó saját, alapértelmezett bélyegképe látszik.

## Lejátszógomb

A **Lejátszógomb** szakaszban a **Kép/ikon** kiválasztásával dönthetsz, hogy a lejátszógomb saját kép vagy ikon legyen.

![A Lejátszógomb szakasz](./kepek/media-video-lejatszogomb-panel.webp)

*A Lejátszógomb szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=17&action=elementor)

A képen az ikonos lejátszógomb beállításai látszanak: **Ikon kiválasztása**, **Méret**, valamint a **Normál** és **Rámutatás** fül.

- **Kép** esetén a gombnak szánt képet a médiatárból választod ki, és a **Rámutatás** fülön rámutatási animációt adhatsz hozzá.
- **Ikon** esetén kiválasztod az ikont, megadod a méretét, a **Normál** és a **Rámutatás** fülön az ikon **Szín**ét, a **Normál** fülön a **Szövegárnyék**ot, a **Rámutatás** fülön pedig a rámutatási animációt.

## Dupla kattintás mobilon

Ha egyéni bélyegképet állítasz be, mobilon alapból két kattintás kell a lejátszáshoz: az első a bélyegképen lévő gombra, a második a már betöltődött lejátszó gombjára. A **Dupla kattintás engedélyezése mobilon** kapcsolóval ezt szabályozhatod. A kapcsoló YouTube, Vimeo, Wistia és saját tárhelyes videónál is megvan.

| Állapot | Mi történik mobilon |
| --- | --- |
| **Igen** | A bélyegkép látszik. Az első kattintás betölti a lejátszót, de a videó nem indul el magától. A második kattintás indítja a lejátszást. |
| **Nem** | Az egyéni bélyegkép nem látszik, a videó alapértelmezett bélyegképe jelenik meg. Egyetlen kattintás elég: a lejátszó betöltődik, és a videó elindul. |

Kapcsold **Igen**-re, ha mobilon nem látod az egyéni bélyegképet vagy a fedvény színét.

## Videóséma

A **Videóséma** szakasz a videóhoz VideoObject sémát ad az oldal kódjához, így a keresőmotorok részletesebb találatot (cím, leírás, dátum, bélyegkép) jeleníthetnek meg a videóról. YouTube, Vimeo és Wistia videóhoz is használható.

![A Videóséma szakasz](./kepek/media-video-sema-panel.webp)

*A Videóséma szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=17&action=elementor)

A képen a **Séma támogatása** kapcsoló és alatta a **Videó címe**, a **Videó leírása** és a **Videó feltöltésének dátuma és időpontja** mező látszik.

1. Nyisd meg a **Videóséma** szakaszt, és kapcsold be a **Séma támogatása** kapcsolót.
2. Töltsd ki a **Videó címe**, **Videó leírása** és **Videó feltöltésének dátuma és időpontja** mezőt.
3. Add meg a videó bélyegképét (lásd lent).

Mind a négy adat kötelező. Ha bármelyik hiányzik, a szerkesztőben értesítés jelenik meg, és a séma addig nem készül el, amíg mindent ki nem töltesz. Ha minden adat megvan, a séma kódja magától bekerül az oldalra.

Ha egyéni bélyegképet adtál meg (**Bélyegkép és átfedés → Egyéni bélyegkép**), a séma ezt használja, és az alapértelmezett bélyegkép mezője a **Videóséma** szakaszban nem látszik. Ha az **Egyéni bélyegkép** be van kapcsolva, de nem választottál hozzá képet, a szerkesztő figyelmeztet.

A séma ellenőrzéséhez írd be az oldal címét vagy a forráskódját a Google Rich Results Test vagy a Schema Markup Validator eszközbe.

## A widget újraszerkesztése

Ha a Videó widget után másik widgetet is hozzáadtál, és nem tudod újra megnyitni a Videó beállításait, kattints a widget jobb felső sarkában megjelenő ceruza ikonra. Ez megnyitja a widget beállítási paneljét.

## Kapcsolódó fejezetek

- [Rögzített videó és YouTube-feliratkozási sáv](https://hub.hellowp.io/hu/plugins/ultimate-elementor/media-video-rogzitett-feliratkozas/)
- [Videó widget fejlesztőknek](https://hub.hellowp.io/hu/plugins/ultimate-elementor/media-video-fejlesztoknek/)