WordPress shortcode: GDPR kompatibilis YouTube videók

YouTube videók vannak az oldaladon? Hol itt a probléma?

Napjainkban már számos weboldalon találunk beágyazott YouTube videókat - előfordulhat, hogy a tiéd is egy ezek közül. Amennyiben a WordPress által biztosított "hagyományos" beágyazási módszereket (Classic Editor, Gutenberg) vagy a page buildereket (Oxygen, stb.) használod a videók beágyazásához, és előzetesen nem kérsz engedélyt a látogatóidtól, akkor valószínűleg megsérted az EU általános adatvédelmi rendeletét (GDPR).

A magyarázat pofon egyszerű, a legtöbben mégsem gondolunk rá: egy YouTube-videót tartalmazó oldal megjelenítésekor automatikusan kapcsolat jön létre a YouTube szervereivel az előnézeti kép letöltéséhez, amely során a látogató IP-címe, vagyis egy személyes adat is továbbításra kerül a YouTube felé. A GDPR alapján ez a látogató kifejezett hozzájárulása nélkül nem megengedhető.

Hogyan lehet mégis YouTube videókat GDPR kompatibilis módon beágyazni a weboldaladra? Természetesen elárulom a megoldást is, de előbb pár sor a szerzői jogok tisztázása érdekében:

A megoldás: egy hasznos shortcode

A YouTube videók GDPR kompatibilis beágyazásának egyik legegyszerűbb módját a Matthias Altmann publikálta. Nem mondom, hogy ez az egyetlen lehetséges megoldás, de kétséget kizáróan az egyik legjobb.

A shortcode használatával a videó előnézeti képe letöltésre kerül a YouTube szerveréről és a helyi gyorsítótárba kerül. A látogató böngészője ezt a helyi előnézeti képet kapja meg, az adatvédelmi irányelvekre vonatkozó - testreszabható - megjegyzéssel együtt. A böngészőnek ezen a ponton még nem kell kapcsolatot létesítenie a YouTube szerverrel. A tényleges videó csak akkor töltődik be a YouTube-ról, ha a látogató rákattintott. Ez az eljárás megfelel a GDPR-nak, mivel a látogatónak először aktívan (rákattintással) meg kell erősítenie, hogy a videót a YouTube-ról kívánja betölteni.

A kódrészlet a youtube-nocookie.com speciális tartományt is használja a videó lekérdezéséhez, így elkerülhető a YouTube sütik használata.

Őszintén szólva nem próbáltam, de ez a megoldás a sebességtesztelő eszközökre (Page Speed Insights, GTMetrix, …) is jelentős pozitív hatást kell, hogy gyakoroljon, mivel ennyivel is kevesebb adat töltődik le külső szerverről.

Shortcode: ma-gdpr-youtube

A shortcode legegyszerűbb felhasználási verziója:

Kattintás után ez a videó a Youtube szervereiről kerül lejátszásra. A részletekért olvassa el az Adatkezelési tájékoztató oldalt.

ahol a 4jlOF09WEw8 a YouTube video azonosítója (ID), amit legegyszerűbben a video URL-jéből tudsz kimásolni.

Ezt a shortcode-ot a WordPress szerkesztőkbe csak be kell másolni, a page builder-ek, mint pl. az Oxygen pedig általában rendelkeznek egy "shortcode" komponenssel ebből a célból.

A fenti shortcode ezt a kimenetet fogja adni:

Kattintás után ez a videó a Youtube szervereiről kerül lejátszásra. A részletekért olvassa el az Adatkezelési tájékoztató oldalt.

A thumbnail a helyi cache-ből töltődik be, nem a YouTube szerveréről. Középen a YouTube-on megszokotthoz hasonló lejátszás gomb, alul pedig a látogatót tájékoztató felirat kerül elhelyezésre, benne az Adatkezelési Tájékoztatóra mutató linkkel.

Előnézeti kép és gyorsítótár

A shortcode automatikusan letölti a videó előnézeti képét a YouTube szerveréről, és elmenti a /wp-content/uploads/ma-gdpr-youtube-thumbnails/ könyvtárba. Minden videó thumbnail külön alkönyvtárba kerül. Ezeket használja a plugin később gyorsítótárként.

Kép méretek

Az előnézeti képek a különböző képernyő felbontásokon való optimális megjelenítés miatt többféle méretben is eltárolásra kerülnek:

• mqdefault (16:9 - 320 x 180 px)
• hqdefault (4:3 - 480 x 360 px)
• sddefault (4:3 - 640 x 480 px)
• hq720 (16:9 - 1280 x 720 px)
• maxresdefault (16:9 - eredeti méret, pl. 1920 x 1080 px)

A snippet a nagyobb felbontású képet használja már a következő nagyobb felbontás felénél a megjelenítés minőségének javítása érdekében.

Shortcode paraméterek

id

Kötelező paraméter. A beillesztendő videó azonosítója (ID), amit legegyszerűbben a video URL-jéből tudsz kimásolni. (Lásd a képet kicsit fentebb.)

aspect-ratio

A YouTube videók alapértelmezett képaránya 16:9-es, de az aspect-ratio paraméter lehetővé teszi, hogy ettől eltérő, pl. 4:3 vagy 1:1 (négyzet) képarányt használj. Elvileg bármilyen méretezés megadható mindaddig, amíg a "szélesség:magasság" arányt két számmal jelölöd, egy kettősponttal elválasztva egymástól. A 16:9-es előnézeti kép lesz hozzáigazítva a megadott képarányhoz.

Például:

Kattintás után ez a videó a Youtube szervereiről kerül lejátszásra. A részletekért olvassa el az Adatkezelési tájékoztató oldalt.

Kattintás után ez a videó a Youtube szervereiről kerül lejátszásra. A részletekért olvassa el az Adatkezelési tájékoztató oldalt.

gdpr-text

A kód előre definiált szövegeket tartalmaz pár nyelvhez - köztük a magyarhoz is -, de természetesen ez is testre szabható. A megjelenített szöveg nyelve az oldal nyelve alapján kerül kiválasztásra. Amennyiben a kívánt nyelven még nem áll rendelkezésre előre definiált szöveg, az angol fog megjelenni.

A szövegben a {privacy-policy-url} és a {privacy-policy-link} kódok segítségével hivatkozhatunk a WordPress-ben beállított adatkezelési tájékoztatónk URL-jére, illetve a teljes hivatkozására. A különbség: a {privacy-policy-link} a hivatkozás szövegét is lecseréli az adatkezelési tájékoztatóként beállított oldal címére. A linket természetesen az alapértelmezett szövegek is tartalmazzák, már amennyiben a WordPress-ben be van állítva ez az oldal (Beállítások / Személyes adatok védelme).

Például:

Wanneer erop wordt geklikt, wordt deze video van de YouTube-servers geladen. Zie het Adatkezelési tájékoztató voor details.

Wanneer erop wordt geklikt, wordt deze video van de YouTube-servers geladen. Zie het https://webnpro.hu/adatkezelesi-tajekoztato/ voor details.

A fenti példában az Adatkezelési Tájékoztató azért jelenik meg a szövegben magyarul, mert az én Adatkezelési Tájékoztató oldalamnak természetesen magyar címe van.

gdpr-text-size

A thumbnail alján a figyelmeztető szöveg alapértelmezésben 0.7em méretben, vagyis a szövegblokk betűméretének 70%-val jelenik meg. A gdpr-text-size paraméter segítségével a saját ízlésednek megfelelően módosíthatod ezt is. Bármilyen érvényes CSS formátumot használhatsz a szövegméret megadásához.

Például:

Kattintás után ez a videó a Youtube szervereiről kerül lejátszásra. A részletekért olvassa el az Adatkezelési tájékoztató oldalt.

Kattintás után ez a videó a Youtube szervereiről kerül lejátszásra. A részletekért olvassa el az Adatkezelési tájékoztató oldalt.

width

Alapértelmezésben a videó 100% szélességben jelenik meg, azaz a befoglaló elem teljes szélességét elfoglalja. A reszponzív nézet így viszonylag egyszerűen megoldható kérdés. A videó magassága a képarány alapján automatikusan kerül meghatározásra. Na persze a videó szélessége egyedileg is megadható, és ehhez nem kell mást tenned, mint a width paraméternek adsz egy számodra megfelelő, érvényes CSS szélesség értéket.

Például:

Kattintás után ez a videó a Youtube szervereiről kerül lejátszásra. A részletekért olvassa el az Adatkezelési tájékoztató oldalt.

Kattintás után ez a videó a Youtube szervereiről kerül lejátszásra. A részletekért olvassa el az Adatkezelési tájékoztató oldalt.

YouTube Player API

A videóra kattintva a YouTube lejátszó a YouTube szerverekről töltődik be a YouTube Player API-n keresztül, így minden szokásos YouTube funkció elérhető. Amennyiben egy adott oldalon több beágyazott videó is található, az egyikre kattintva a másik, már futó videó leállításra kerül, hogy soha ne fusson egyszerre két stream.

Szerzői jogok

Mint a cikk elején is említettem ez a bejegyzés Matthias Altmann "Code Snippet: GDPR compliant YouTube Videos" című blog bejegyzése alapján készült, a szerző engedélyével. A forráskódot erre a linkre kattintva éred el: https://www.altmann.de/en/blog-en/code-snippet-gdpr-compliant-youtube-videos/#sourcecode, az Advanced Scripts-be importálható fájlt pedig itt találod: https://www.altmann.de/en/blog-en/code-snippet-gdpr-compliant-youtube-videos/#download.