# Videó widget, Videó elem és YouTube elem

> Videók beágyazása YouTube-ról, Vimeóról, Dailymotionról, VideoPressből vagy saját tárhelyről: források, lejátszási beállítások, képfedő réteg és stílus.

A **Videó** widget különböző forrásokból ágyaz be videót az oldalra: YouTube, Vimeo, Dailymotion, VideoPress vagy a saját tárhelyről feltöltött fájl. A lejátszó vezérlőit, a lejátszás gombot és a megjelenést beállíthatod.

## Mire jó?

- Edzésblogon bemutató videóra, egyedi előnézeti képpel a nyitó szakaszban.
- Céges bemutatkozó videó, ügyfélvélemény vagy ajánló megjelenítésére.
- Ingatlanoknál virtuális bejárás videójára.
- Zenei klipek, interjúk, kulisszák mögötti felvételek bemutatására.

## A Videó widget felvétele lépésről lépésre

1. Add a **Videó** widgetet a vászonhoz.
2. A **Tartalom** fülön, a **Videó** szekcióban a **Forrás** mezőben válaszd ki a forrást: **YouTube**, **Vimeo**, **Dailymotion**, **VideoPress** vagy **Saját tárhely**. A forrás alatti beállítások a választott forrástól függően változnak.
3. A **Link** mezőbe illeszd be a videó címét (YouTube-nál például a videó linkjét).
4. Ha csak egy részletet akarsz megmutatni, a **Kezdés időpontja** mezőbe írd a kezdés idejét másodpercben.
5. A **Befejezési idő** mezőbe a videó végét írd másodpercben. Ha a teljes videót akarod, hagyd üresen a kezdés és a befejezés mezőt.

![A Videó widget Tartalom füle YouTube-forrással](./kepek/widgetek-video-tartalom.webp)

*A Videó widget Tartalom füle YouTube-forrással* (https://minta-bolt.hu/wp-admin/post.php?post=81&action=elementor)

A képen a **Forrás** választó, a **Link**, a **Kezdés időpontja**, a **Befejezési idő** és a **Videóbeállítások** kapcsolói látszanak.

## Forrásonkénti beállítások

### YouTube

| Beállítás | Mit csinál |
|---|---|
| **Link** | A YouTube-videó linkje |
| **Kezdés időpontja**, **Befejezési idő** | A lejátszás kezdete és vége másodpercben |
| **Automatikus lejátszás** | A videó az oldal megnyitásakor magától elindul. Bekapcsolva külön engedélyezheted mobilon is (**Lejátszás mobilon**) |
| **Némítás** | A videó hang nélkül indul |
| **Ismétlés** | A videó folyamatosan újraindul |
| **Lejátszó vezérlői** | A lejátszás, szünet és hangerő gombok megjelenítése vagy elrejtése. Itt kapcsolható be a **Visszafogott márkajelzés** is, amely lejátszás közben elrejti a YouTube logóját (az előnézeti képen megmarad) |
| **Feliratok** | A YouTube-feliratok megjelenítése |
| **Adatvédelmi mód** | Bekapcsolva a YouTube addig nem tárol adatot a látogatókról, amíg a videót el nem indítják |
| **Késleltetett betöltés** | A videó adatai csak akkor töltődnek be, amikor a látogató a videóhoz görget, ami gyorsítja az oldalt |
| **Ajánlott videók** | Mit ajánljon a YouTube a videó végén: **Aktuális videócsatorna** vagy **Bármilyen videó** |

### Vimeo

A **Link**, **Kezdés időpontja**, **Automatikus lejátszás**, **Némítás**, **Ismétlés**, **Adatvédelmi mód** és **Késleltetett betöltés** ugyanúgy működik, mint a YouTube-nál (a Vimeo adatvédelmi módja is addig nem tárol látogatói adatot, amíg el nem indítják a videót). A késleltetett betöltésnél a videó többi része csak a lejátszás gomb megnyomásakor töltődik be. Külön beállítások:

- **Bevezető cím**, **Bevezető portré**, **Bevezető aláírás**: megjelenítésük vagy elrejtésük.
- **Vezérlők színe**: a vezérlőgombok (például lejátszás és szünet) színe.

### Dailymotion

Itt is van **Link**, **Kezdés időpontja**, **Automatikus lejátszás**, **Némítás**, **Lejátszó vezérlői**, **Késleltetett betöltés** és **Vezérlők színe**. Külön beállítások:

- **Videóinformáció**: a videó adatainak (például címének) megjelenítése vagy elrejtése.
- **Logó**: a videó logójának megjelenítése vagy elrejtése.

### VideoPress

Ha a videó a médiatárban van, a **Külső URL** kapcsolót hagyd **Nem** állapotban, és a médiatárból választhatod ki vagy töltheted fel a videót. Ha nincs ott, kapcsold **Igen**-re, és a megjelenő mezőbe írd be a fájl URL-jét. Beállítható még a **Kezdés időpontja**, az **Automatikus lejátszás**, a **Némítás**, az **Ismétlés** és a **Lejátszó vezérlői** (köztük a **Visszafogott márkajelzés**).

### Saját tárhely

A videóforrás itt a médiatár vagy egy külső fájl URL-je (a **Külső URL** kapcsoló ugyanúgy működik, mint a VideoPressnél). Beállítások:

- **Kezdés időpontja** és **Befejezési idő** másodpercben.
- **Automatikus lejátszás**, **Némítás**, **Ismétlés** és **Lejátszó vezérlői**.
- **Letöltés gomb**: a letöltési lehetőség megjelenítése vagy elrejtése (csak Chrome-ban működik).
- **Előtöltés**: azt adja meg, mennyit töltsön le a böngésző az oldal megnyitásakor. A **Metaadatok** csak a videó adatait (hossz, méretek) tölti be, ami gyorsabb betöltést ad. Az **Automatikus** azonnal elkezdi a betöltést, így a lejátszás zökkenés nélkül indul, de több sávszélességet használ. A **Nincs** semmit nem tölt be, amíg a látogató el nem indítja a lejátszást, ez sávszélességet takarít meg, de a lejátszás gombnál kis késés lehet.
- **Poszterkép**: a videó helyén a lejátszás előtt megjelenő kép.

## Képfedő réteg és lejátszás ikon

A forrástól függően a videóra képfedő réteget tehetsz:

- **Képfedő réteg**: megjelenítése vagy elrejtése.
- **Kép kiválasztása**: a feltöltött vagy kiválasztott kép.
- **Képfelbontás**: bélyegkép, teljes méret vagy egyedi méret.
- **Lejátszás ikon**: ha bekapcsolod, választhatsz az alapértelmezett lejátszás gomb, egy feltöltött SVG vagy az ikonkönyvtár ikonjai közül.
- **Lightbox**: bekapcsolva a videó lightboxban, felugró ablakban játszódik le.

## Stílus fül

- **Képarány**: a videó alakja, például négyzet (1:1), klasszikus (4:3), szélesvásznú (16:9) és más arányok.
- **CSS-szűrők**: effektek, például elmosás, fényerő és színbeállítások.
- Képfedő rétegnél a lejátszás ikon **színe** és **mérete**, valamint **árnyéka** is állítható.

![A Videó widget Stílus füle: képarány és CSS-szűrők](./kepek/widgetek-video-stilus.webp)

*A Videó widget Stílus füle: képarány és CSS-szűrők* (https://minta-bolt.hu/wp-admin/post.php?post=81&action=elementor)

A képen a **Képarány** (16:9) és a **CSS-szűrők** gombja látszik.

## Haladó fül

A **Haladó** fülön a widget pozícióját, térközeit és egyedi kódját állíthatod. Lásd: [Haladó widgetbeállítások és hibakeresés](https://hub.hellowp.io/hu/plugins/elementor/widgetek-halado-beallitasok/).

## Videó elem és YouTube elem (v4)

A v4 szerkesztő saját **Videó** és **YouTube** elemmel rendelkezik. Mindkettő a v4 szerkesztő része, ezért előbb a v4 funkciókat kell bekapcsolni (lásd: [Első lépések az Elementor szerkesztő v4-gyel](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-atomic-szerkeszto/)).

Az elem hozzáadása: kattints a **+** gombra, majd kattints az elemre, vagy húzd a vászonra. A bal oldali panelen megjelennek az elem beállításai. A szerkesztőlap **Általános** és **Stílus** fülből áll.

### YouTube elem

1. Húzd az elemet az oldalra.
2. A **YouTube URL** mezőbe írd a beágyazandó videó linkjét.
3. (Nem kötelező) Add meg a kezdés és a befejezés idejét másodpercben, ha csak a videó egy részét mutatnád.
4. Állítsd be a további lehetőségeket, majd a **Stílus** fülön a megjelenést, például a hátteret.

Az **Általános** fül beállításai: **Kezdés időpontja**, **Befejezési idő**, **Automatikus lejátszás** (mobilra külön engedélyezhető), **Némítás**, **Ismétlés**, **Késleltetett betöltés**, **Lejátszó vezérlői**, **Feliratok**, **Adatvédelmi mód** és **Kapcsolódó videók** (az aktuális csatorna vagy bármely videó).

### Videó elem

A **Videó** elem a saját tárhelyen lévő videót ágyazza be. Kattints a videó mezőre, a **Videó kiválasztása** gombbal válassz a médiatárból, vagy az **Feltöltés** gombbal tölts fel újat. Utána állítsd be a kezdést és a befejezést másodpercben, majd a további lehetőségeket.

Az **Általános** fül beállításai: **Kezdés időpontja**, **Befejezési idő**, **Automatikus lejátszás** (mobilra külön), **Némítás**, **Ismétlés**, **Lejátszó vezérlői**, **Letöltés engedélyezése** (a látogató letöltheti a videót), **Előtöltés** (**Automatikus**, **Metaadatok** vagy **Késleltetett betöltés**, utóbbi csak a lejátszás gombnál tölti be a videót, ami gyorsítja az oldalt) és **Poszterkép** (a videót jelképező kép, amelyhez a képmezőben fel is kell tölteni egy képet).

A **Stílus** fülön mindkét elemnél ugyanazok a v4-stílusszekciók érhetők el: elrendezés, térközök, méret, pozíció, tipográfia, háttér, szegély és effektek. Ezeket részletesen itt találod: [Stílus fül: Méret (V4)](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-meret/), [Pozíció (V4)](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-pozicio/), [Tipográfia (V4)](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-tipografia/), [Háttér (V4)](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatter/), [Hatások (V4)](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatasok/).