A YouTube videók weboldalba történő beillesztése a nyilvános embed kódoknak köszönhetően pár kattintás csupán, viszont az alapértelmezett megoldás minden, csak nem felhasználóbarát. A gyári beillesztő kód kimenete nem reszponzív és emellett még óriási méretű szkripteket is tölt be a lejátszó létrehozásához, ez pedig nagyban növeli a weboldal méretét és ezáltal a betöltési idejét is. Ezen fő problémák okán merült fel az a gondolat, hogy kellene készíteni egy olyan bővítményt, ami minden beillesztett videót reszponzívvá varázsol és teszi ezt úgy, hogy a lejátszót is csak akkor tölti be, ha tényleg szükség van rá, ezzel oldal méretet és betöltési időt spórolva.
A plugin elkészítéséhez az adta a végső lökést, amikor nemrégiben egy WordPress oldal sebesség optimalizálásán dolgoztam és a főoldal 25 blogbejegyzésének végén található YouTube videó betöltése két vállra fektette a böngészőmet. A GTMetrix teszt le sem tudott futni, egészen egyszerűen folyamatosan hibaüzeneteket dobott, az oldal betöltése és megjelenítése pedig felért egy kisebb kínzással. Felhasználói élményről nem lehetett beszélni és abban is kételkedtem, hogy bárki képes lett volna kivárni a hosszas betöltési időket. A videóknak maradni kellett, viszont szükség volt valami trükkre, hogy a közel fél perces betöltési időt le tudjam csökkenteni néhány másodperc körüli értékre úgy, hogy a felhasználó számára ne legyen szemmel látható változás az oldal megjelenésében.
A szorgos munkát eredmény is követte, így nemrégiben el is készültünk a “Lightweight and Responsive Youtube Embed” nevű bővítmény első publikus változatával, ami már fel is került a WordPress hivatalos bővítménytárába, tehát bárki számára letölthető és korlátozások nélkül, ingyenesen használható.
A plugin mindössze 60KB méretű, nem tartalmaz semmilyen felesleges funkciót, használata pedig shortcode-ok segítségével mindenki számára könnyedén elsajátítható.
Működés
Egy videó beillesztése a következőképpen néz ki:
[youtube_embed url="https://www.youtube.com/watch?v=eh7lp9umG2I"]
A fenti shortcode-ban értelemszerűen cseréljük a videó linkjét a sajátunkra. Ezután mindössze annyi történik, hogy az eredeti “böngésző gyilkos” lejátszó helyett csak a videó előnézeti képe jelenik majd meg, a valódi lejátszó (és maga a videó) pedig csak kattintásra töltődik be, tehát nem terheli idő előtt feleslegesen a böngészőt és nem növeli az oldal méretét sem.
Lehetőség van a videó beépített előnézeti képének cseréjére is, ehhez a következő paramétert használjuk:
[youtube_embed url="https://www.youtube.com/watch?v=eh7lp9umG2I" thumb-url="//s.w.org/about/images/logos/wordpress-logo-notext-rgb.png"]
Ha szeretnénk a videót balra/jobbra/középre zárni, akkor azt így tehetjük meg:
[youtube_embed url="https://www.youtube.com/watch?v=eh7lp9umG2I" align="center"]
A lehetséges paraméterek (left: balra zár, right: jobbra zár, center: középre zár)
A beillesztett videó méretének megváltoztatására is van mód:
[youtube_embed url="https://www.youtube.com/watch?v=eh7lp9umG2I" width="50"]
Alapértelmezetten minden videó 100%-os méretben jelenik meg (tehát kitölti a szülő elem teljes szélességét), ez felülbírálható a globális beállításokban, vagy minden videó esetében egyesével a fenti shortcode használatával. 50-et megadva 50%-os lesz a videó mérete.
A bővítmény rendelkezik egy nagyon egyszerű beállítási panellel is, ahol a következőket tudjuk megszabni:
- A beillesztett videók szélessége (alapértelmezetten 100%)
- A kezelőszervek (lejátszás/szünet gomb, pozíció sáv, stb) megjelenítésének be/kikapcsolása globálisan
- A teljes képernyőre váltás engedélyezése/tiltása globálisan
- A videók globális pozicionálása (balra, jobbra, középre zárás)
- A kapcsolódó videók megjelenítésének engedélyezése vagy tiltása globálisan
Tehát miért is jó ez?
- Az összes YouTube videó reszponzív megjelenést kap és minden eszközön megfelelően jelenik majd meg
- Csökkenni fog a weboldalad mérete, ezzel egy időben a betöltési sebessége is (ami igen hasznos, ha sebesség optimalizálod az oldalad)
- Növelni fogja a felhasználói élményt (nem kell fél percet várni az oldal megjelenésére és a lejátszó(k) betöltésére)
A végére egy kis összehasonlítás
Az alapértelmezett TwentySeventeen WordPress sablon mellé telepítettük a “Lightweight and Responsive Youtube Embed” bővítményt és beillesztettünk egy YouTube videót a hagyományos módon, a bővítmény nélkül, majd a bővítményünk segítségével.
Az eredmények a következők lettek:
A teljes oldal méret a hagyományos YouTube embed kódot használva: 2.18MB
A teljes oldal méret a pehelysúlyú és reszponzív plugint használva: 472KB
Az oldal betöltési ideje a hagyományos YouTube beillesztő kóddal: 5.33s
Az oldal betöltési ideje a plugint használva: 2.52s
A tesztek végrehajtásakor egyéb bővítmény nem volt aktív, a videót pedig egy teljesen új, üres oldalra helyeztük ki mindkét esetben. Úgy gondolom, hogy a különbség szemmel látható.
A plugin tehát nagyon egyszerűen, de hatékonyan dolgozik, használata pedig minden olyan WordPress felhasználó számára ajánlott, aki YouTube videó(ka)t jelenít meg a weboldalán.
Keressetek minket bátran, ha bármilyen problémát tapasztaltok, de esetleges fejlesztési javaslatokat is szívesen fogadunk! Igyekszünk naprakészen tartani a bővítményt és minden bejelentett hibát rendszeresen javítunk majd.
