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

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 í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.

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.