Bricks Builder Video

A Bricks Builder Video eleme elsőre annyinak tűnik, hogy bemásolod egy YouTube-videó linkjét, és kész is az beágyazás. A probléma az, hogy egy YouTube- vagy Vimeo-iframe nem egy egyszerű, könnyű HTML elem: a saját lejátszó JavaScriptje, a stílusai és a követőkódjai simán 500 KB és 1 MB közötti extra terhelést jelentenek, amit a böngésződ akkor is letölt, ha a látogató soha nem indítja el a videót. Ez pont az ellenkezője annak, amit egy jól optimalizált oldaltól várnál. Az Image elemnél a lazy loading és az Aspect ratio volt a két legfontosabb teljesítmény-kapcsoló; a Video elemnél ehhez jön egy harmadik, sokkal nagyobb súlyú eszköz is: az Előnézeti kép (Preview image), ami teljesen kihagyja a lejátszó betöltését addig, amíg a látogató rá nem kattint.

A választás azon múlik, mennyire fontos neked a teljesítmény és mennyire a kényelem. YouTube vagy Vimeo forrásnál (videoType: youtube / vimeo) a szolgáltató szervere tárolja és streameli a videót, neked csak a videó ID-ját vagy URL-jét kell megadnod, cserébe a látogató böngészője letölti a szolgáltató saját lejátszójának a kódját is. Saját fájlnál (Media, ha a médiatárból választasz, vagy File URL, ha csak egy linket adsz meg) a Bricks natív <video> taget generál, amit a böngésző beépített lejátszójával jelenít meg: ez könnyebb, de a tárhelyedet és a sávszélességedet terheli, és nincs automatikus adaptív minőségváltás, mint a YouTube-nál. Van egy ötödik opció is, a Dynamic data (meta), amivel egy egyéni mezőből vagy ACF-mezőből töltheted be a videó URL-jét. Ez a másik négy típus valamelyikébe illeszkedik a beállított érték alapján.

E billentyű vagy a bal oldali „Add element” (+) gomb, rákeresel, hogy „Video”, és a kívánt szülőbe húzod, tipikusan egy Container-be vagy Block-ba. Az elem nem fogad gyermekelemeket, ugyanúgy, mint az Image. Üres állapotban egy „No video selected” helykitöltő szöveggel jön létre, alapértelmezett forrás a YouTube egy demó videó ID-jával. Ez az első lépésnél mindenképp cserélendő a saját videódra. Ha üresen hagyod a YouTube ID-t, a Vimeo ID-t vagy a File URL mezőt, az elem a szerkesztőben és élesben is egy „nincs videó” jellegű helyőrzőt jelenít meg, tehát nem tud véletlenül üres, hibás állapotban kikerülni éles oldalra észrevétlenül.

Source. Öt lehetőség: YouTube (alapértelmezett), Vimeo, Media (saját fájl a médiatárból), File URL (közvetlen link egy videófájlra) és Dynamic data (egyéni/ACF mezőből). Az első kettő beágyazást csinál egy külső szolgáltatótól, a másik három a saját szervered videóját tolja ki natív video tagként.

Iframe title. YouTube és Vimeo esetén elérhető mező, ami az iframe title attribútumát adja: ez akadálymentesítési szempontból fontos, mert a képernyőolvasók ez alapján mondják be, mi az a beágyazott tartalom. Ne hagyd üresen, ha valódi tartalmat hordoz a videó.

Aspect ratio és Object fit. Az Aspect ratio mezőben nyolc előre elkészített arány közül választhatsz (16:9, 9:16, 4:3, 3:4, 21:9, 1:1, 2:3, 3:2), vagy egyedi értéket is megadhatsz. Nincs alapértelmezett érték. Ha nem állítod be, a böngésző nem tud helyet fenntartani a videónak betöltés előtt, és ez layout-ugrást (Cumulative Layout Shift) okoz, pontosan úgy, mint az Image elemnél. Az Object fit csak saját fájlnál (Media/File URL/Dynamic data) jelenik meg, mert csak ott van tényleges video tag, aminek a tartalmát pozicionálni kell a rögzített kereten belül. YouTube/Vimeo iframe-nél ez nem értelmezhető, azt a szolgáltató lejátszója kezeli.

YouTube-specifikus beállítások. A YouTube videó ID/URL mező mellett itt találod az Autoplay-t, a Controls-t (a natív YouTube-vezérlőket kapcsolja), a Loop-ot, a Mute-ot, a „Related videos from other channels” opciót (ha kikapcsolva hagyod, a videó vége után csak ugyanattól a csatornától ajánl fel videókat, nem bárkitől), a „Do not track” kapcsolót (ez a beágyazást a youtube-nocookie.com domainre viszi át, ami a sütikezelés szempontjából barátságosabb), a kezdő/befejező időpontot másodpercben, a „Disable fullscreen button” és a „Disable keyboard controls” opciókat, az interfész és a felirat nyelvét, a feliratok alapból bekapcsolását, a progresssáv színét, és az annotációk elrejtését.

Vimeo-specifikus beállítások. A Vimeo videó ID/URL és a Vimeo privacy hash (privát videóknál kötelező) mellett itt van az Autoplay, Loop, Mute, Byline (a feltöltő neve a lejátszó alján), Title (a videó címe a lejátszó alján), User portrait (a feltöltő profilképe), Do not track és a lejátszó kiemelő színe.

Előnézeti kép (Preview image). Csak YouTube/Vimeo forrásnál elérhető, és ez a Video elem legerősebb teljesítmény-eszköze: ahelyett, hogy az iframe azonnal (vagy a görgetéskor) betöltődne, egy statikus háttérképet jelenít meg, és csak a látogató kattintására tölti be a tényleges lejátszót. Választhatsz alapértelmezett (API-ról lekért) vagy egyedi feltöltött képet; YouTube-nál az alapértelmezett kép méretét is beállíthatod 120×90-től egészen 1280×720-ig. Fontos korlátozás: Autoplay nem működik együtt Előnézeti képpel: ha mindkettőt bekapcsolod, a videó nem indul el automatikusan, hiszen a kattintás a trigger.

Saját fájl beállításai (Media/File URL/Dynamic data). Preload (metadata/auto/none, alapból a böngésző dönt), Autoplay, Loop, Mute, Play inline (iOS-en fontos, hogy ne ugorjon teljes képernyőre lejátszáskor), Controls (alapból bekapcsolva), és három letiltási kapcsoló: Download, Fullscreen, Remote playback (ezek a controlslist attribútumot állítják, amit a Firefox nem támogat). Az egyéni lejátszó-vezérlők (visszatekerés, sebesség, kép-a-képben) globálisan, a Settings → Theme Styles → Element – Video alatt kapcsolhatók be, nem elemenként.

Poster. Saját fájlnál ez adja a <video> tag poster attribútumát: ez a videó borítóképe, amíg a lejátszás el nem indul. YouTube/Vimeo forrásnál is kitöltheted: ha nincs külön Előnézeti kép beállítva, a Poster mezőben megadott kép lesz a beágyazás előnézeti képe.

Overlay és Icon. Külön „Overlay / Icon” csoportban találod: az Overlay egy háttér (szín, kép, gradiens) a videó fölé, az Icon pedig egy lejátszásgomb ikon, amit a Bricks billentyűzettel fókuszálhatóvá tesz (tabindex="0", role="button"). Az aria-label mező alapesetben az ikonra kerül; ha nincs ikon, de van overlay, akkor az overlay-re. Mindig legyen kitöltve, ha ezekkel dolgozol. Az ikonhoz külön typography, padding, háttérszín, border és box-shadow is beállítható.

A videó szinte minden oldalon a legsúlyosabb egyedi elem, ezért itt van a legnagyobb tere a mérhető gyorsításnak. Három dolog számít igazán. Az Előnézeti kép (Preview image) YouTube/Vimeo-nál: ez az egyetlen beállítás, ami teljesen kihagyja a lejátszó JS-ének betöltését addig, amíg a látogató nem kattint. Ha van olyan oldalad, ahol a videó nem az első képernyőn kritikus, mindig kapcsold be. A Bricks maga is ad egy alapszintű védelmet: 2.2 óta minden YouTube/Vimeo iframe automatikusan megkapja a natív loading="lazy" attribútumot, erre nem kell külön kapcsolót keresned. Az Aspect ratio mindig legyen beállítva, mert enélkül a videó betöltés közben elugrasztja a layoutot (CLS), pont úgy, mint egy Aspect ratio nélküli Image elem. Saját fájlos videónál a Poster attribútum nemcsak vizuálisan hasznos, hanem a Google videó-indexelésének is támpontot ad egy borítóképről.

Amit érdemes tudni: a Bricks Video eleme nem generál automatikusan VideoObject strukturált adatot (schema.org JSON-LD), sem YouTube/Vimeo beágyazásnál, sem saját fájlnál, ellentétben a Icon-nál bemutatott accordion faqSchema-val, ami erre a célra beépített kapcsoló. Ha valóban videó gazdag találatra (rich result) hajtasz a Google keresésben, ehhez külön kell VideoObject schema-t hozzáadnod (Rank Math sablonos schema-generátorával vagy egyedi JSON-LD blokkal), mert az önmagában beágyazott iframe vagy video tag ehhez nem elég.

A leggyakoribb meglepetés: a YouTube-videón alapból hiányzik a teljes képernyő gomb. Ez nem hiba: a „Disable fullscreen button” kapcsoló alapból be van kapcsolva a Video elemen, tehát ha szeretnéd, hogy a látogató ki tudja nagyítani a videót, kifejezetten ki kell kapcsolnod ezt az opciót.

Ha bekapcsoltad az Autoplay-t, de a videó mégsem indul el magától, nézd meg, nincs-e egyszerre bekapcsolva az Előnézeti kép is: a kettő nem működik együtt, a kattintás felülírja az automatikus indítást. Saját fájlos videónál pedig az Autoplay csak Mute-tal együtt működik megbízhatóan a legtöbb böngészőben (ez böngésző-szintű korlátozás, nem Bricks-hiba), a Bricks emiatt automatikusan hozzáadja a playsinline attribútumot is Autoplay esetén, hogy iOS-en ne ugorjon teljes képernyőre.

Ha a Download/Fullscreen/Remote playback letiltása nem működik egy látogatónál, valószínűleg Firefoxot használ: ezeket a kapcsolókat a controlslist attribútum adja, amit a Firefox jelenleg nem támogat, ez böngésző-korlát, nem beállítási hiba.

Ha a videó betöltés közben elugrasztja alatta a tartalmat, majdnem mindig a hiányzó Aspect ratio az ok: állíts be egy fix arányt (16/9 a legtöbb esetben), és a böngésző már a betöltés előtt fenntartja neki a helyet.

Ha a lejátszásgomb ikon nem fókuszálható billentyűzettel, ellenőrizd, hogy tényleg az Icon mezőt használod-e az Overlay/Icon csoportban, ne egy külön, kézzel odarakott elemet: csak a beépített Icon mező kapja meg automatikusan a tabindex="0" és role="button" attribútumokat. Ha ebben elakadsz, vagy inkább profira bíznád, kérhetsz ajánlatot is.

Vörös László WordPress fejlesztő és Bricks Builder szakértő. Több mint 20 éve webfejlesztőként, 18 éve WordPress fejlesztőként dolgozom. Specialitásom a Bricks Builder, SEO és a biztonságos weboldalak fejlesztése.