# Video Player: felugró ablak, képmaszk és CSS-szűrők

> A videó megnyitása felugró ablakban, képmaszk a videóra és CSS-szűrők normál és rámutatásos állapotra.

A **Video Player** widget három látványelemmel egészíthető ki: felugró ablakos lejátszással, képmaszkkal és CSS-szűrőkkel. A widget alapjait az [áttekintés](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-video-attekintes/) írja le.

## Videó felugró ablakban

A felugró ablakos videó az oldalon csak egy bélyegképet mutat, a kattintásra pedig a videó egy rávetített ablakban nyílik meg. Így az oldal elrendezése tiszta marad. Jó választás bemutatóvideóhoz, kurzus előzetesekhez vagy portfólió bemutatóhoz.

1. Húzd a **Video Player** widgetet az oldalra.
2. A **Video** szakasz **Source** mezőjében válaszd ki a forrást: **Youtube** vagy **Vimeo** a külső videóhoz, **Self Hosted** a feltöltött videóhoz.
3. Add meg a videót a forrásnak megfelelően (azonosító vagy mp4 fájl).
4. Az **Image/Icon** szakaszban a **Only Icon / Full Banner** legördülőben válaszd a **Banner Image** értéket.
5. Kapcsold be a **Banner Image** kapcsolót.
6. Az **Image Upload** mezőben válaszd ki a bélyegképet, amelyre a látogató kattint. Ez általában egy kép a videóból vagy egy saját borítókép. A **Képfelbontás** legördülővel a méretét állíthatod.
7. Ha lejátszás ikont szeretnél a kép fölé, töltsd fel az **Icon Upload** mezőben. Ennek is van **Képfelbontás** legördülője.
8. A **Title of Video** mezőbe írd a videó címét, a **Video Description** mezőbe a rövid leírást. A cím a bélyegkép mellett jelenik meg, és segít a látogatónak eldönteni, mit fog látni.
9. Lépj a **Stílus** fülre, nyisd ki a **Video Styling** szakaszt, és kapcsold be a **Video On Popup** kapcsolót.

![A videó bélyegképe a nyilvános oldalon](./kepek/kepek-media-video-popup-borito.webp)

*A videó bélyegképe a nyilvános oldalon* (https://minta-bolt.hu/km-video-popup/)

A képen a kattintható bélyegkép látszik. Kattintás után a videó egy felugró ablakban indul el.

Az **Only Icon image** beállítás magától felugró ablakban nyitja meg a videót, ezért annál a **Video On Popup** kapcsolóra nincs szükség.

A felugró ablakot a Plus Addons Popup Builderével is megnyithatod bármelyik elemre kattintva.

## Képmaszk a videóra

A maszk egy alakzat (például kör vagy hullám) formájára vágja a videót. Hozzá egy átlátszó hátterű PNG vagy SVG kép kell a kívánt alakzattal.

1. Húzd a **Video Player** widgetet az oldalra, és add meg a videót (mp4 forrásnál működik a legjobban).
2. A **Stílus** fülön nyisd ki a **Mask Image** szakaszt.
3. Kapcsold be a **Mask Image Shape** kapcsolót.
4. A **Mask Image** mezőben válaszd ki az alakzat képét.

A hatás jobban látszik, ha a videó automatikusan indul: kapcsold be az **AutoPlay** kapcsolót a **Video Options** szakaszban.

A maszk alakját további beállításokkal finomíthatod, ezek a **Mask Image Shape** bekapcsolása után jelennek meg:

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Mask Position** | az alakzat helye a videón | **center center** |
| **Mask Repeat** | az alakzat ismétlődése | **no-repeat** |
| **Mask Size** | az alakzat mérete | **contain** |

Vigyázz: a maszkhoz csak mp4 videót használj.

## CSS-szűrők a videóra

A szűrőkkel (például szürkeárnyalat, elmosás, fényerő) egyedi hangulatot adhatsz a videónak.

1. Húzd a **Video Player** widgetet az oldalra, és add meg a videót.
2. Lépj a **Stílus** fülre, és nyisd ki a **Video Styling** szakaszt.
3. A **CSS Filters** sorban kattints a ceruza ikonra, és állítsd be a kívánt szűrőket.

A **Video Styling** szakaszban a **Normal** és a **Hover** lap külön szűrőket kaphat. Így a videó rámutatáskor megváltoztathatja a hatását, például színes lesz egy szürkeárnyalatos videóból.