{"id":1259,"date":"2026-08-05T15:39:07","date_gmt":"2026-08-05T13:39:07","guid":{"rendered":"https:\/\/www.sabatka.net\/cs\/?p=1259"},"modified":"2026-08-05T16:18:12","modified_gmt":"2026-08-05T14:18:12","slug":"youtube-nocookie-gdpr","status":"publish","type":"post","link":"https:\/\/www.sabatka.net\/cs\/youtube-nocookie-gdpr\/","title":{"rendered":"youtube-nocookie GDPR: pro\u010d to nesta\u010d\u00ed (a co d\u011blat m\u00edsto toho)"},"content":{"rendered":"<\/p>\n\n\n<p class=\"wp-block-paragraph\">Vkl\u00e1d\u00e1te na web YouTube video? Pak \u0159e\u0161\u00edte GDPR, i kdy\u017e jste o tom mo\u017en\u00e1 nikdy nep\u0159em\u00fd\u0161leli. A pokud jste to u\u017e \u0159e\u0161ili tak, \u017ee jste p\u0159epnuli embed na dom\u00e9nu <a href=\"http:\/\/youtube-nocookie.com\" target=\"_blank\" rel=\"noopener\">youtube-nocookie.com<\/a>, m\u00e1m pro v\u00e1s nep\u0159\u00edjemnou zpr\u00e1vu: nen\u00ed to \u0159e\u0161en\u00ed zcela v souladu s GDPR. Je to krok spr\u00e1vn\u00fdm sm\u011brem. Nen\u00ed to hotovo.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button scroll_to_subscribe\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Chci odeb\u00edrat novinky<\/a><\/div>\n\n\n\n<div class=\"wp-block-button linkedinShare\"><a class=\"wp-block-button__link wp-element-button\">Sd\u00edlet na LinkedIN<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">P\u0159ed p\u00e1r m\u011bs\u00edci jsem psal o rozsudku, kter\u00fd v Hannoveru rozhodl, \u017ee <a href=\"https:\/\/www.sabatka.net\/cs\/gtm-v-rozporu-s-gdpr\/\">Google Tag Manager bez souhlasu poru\u0161uje GDPR<\/a> \u2014 a to jen proto, \u017ee GTM s\u00e1m o sob\u011b um\u00ed na\u010d\u00edst k\u00f3d t\u0159et\u00ed strany. YouTube embed je stejn\u00fd p\u0159\u00edpad, jen v jin\u00e9m h\u00e1vu: ciz\u00ed dom\u00e9na, ciz\u00ed skript, ciz\u00ed server, kter\u00fd dostane IP adresu va\u0161eho n\u00e1v\u0161t\u011bvn\u00edka d\u0159\u00edv, ne\u017e na cokoliv klikne. Tenhle \u010dl\u00e1nek na to navazuje \u2014 jen m\u00edsto GTM je hlavn\u00ed postavou YouTube.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">youtube-nocookie GDPR: co Google slibuje a co zaml\u010duje<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Zd\u00e1nliv\u00e9 \u0159e\u0161en\u00ed m\u00e1 ofici\u00e1ln\u00ed jm\u00e9no \u2014 Google tomu \u0159\u00edk\u00e1 Privacy Enhanced Mode. Slibuje dv\u011b konkr\u00e9tn\u00ed v\u011bci:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>zhl\u00e9dnut\u00ed videa p\u0159es nocookie dom\u00e9nu neovlivn\u00ed personalizaci obsahu na YouTube.<\/li>\n\n\n\n<li>p\u0159\u00edpadn\u00e9 reklamy k videu nebudou personalizovan\u00e9.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">To je <a href=\"https:\/\/support.google.com\/youtube\/answer\/171780\" target=\"_blank\" rel=\"noopener\">cel\u00fd ofici\u00e1ln\u00ed slib<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">V\u0161imn\u011bte si, co v n\u011bm chyb\u00ed. Google ne\u0159\u00edk\u00e1, \u017ee se o zobrazen\u00ed videa nic neukl\u00e1d\u00e1. Ne\u0159\u00edk\u00e1, \u017ee se nep\u0159en\u00e1\u0161\u00ed \u017e\u00e1dn\u00e1 data. Slibuje jen nepersonalizaci \u2014 ne anonymitu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A realita je p\u0159esn\u011b mezi t\u00edm:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>P\u0159i samotn\u00e9m na\u010dten\u00ed str\u00e1nky s embedem (i t\u00edm na nocookie dom\u00e9n\u011b) odch\u00e1z\u00ed IP adresa va\u0161eho n\u00e1v\u0161t\u011bvn\u00edka na servery Googlu. To je fakt, ne interpretace \u2014 jde o p\u0159enos osobn\u00edch \u00fadaj\u016f.<\/li>\n\n\n\n<li><a href=\"http:\/\/youtube-nocookie.com\" target=\"_blank\" rel=\"noopener\">youtube-nocookie.com<\/a> zapisuje do prohl\u00ed\u017ee\u010de hned p\u0159i na\u010dten\u00ed str\u00e1nky, je\u0161t\u011b ne\u017e na cokoliv kliknete. Otestoval jsem to: okam\u017eit\u011b po na\u010dten\u00ed embedu p\u0159ibyly v localStorage z\u00e1znamy <code>yt-icons-last-purged<\/code> a <code>ytidb::LAST_RESULT_ENTRY_KEY<\/code>. Dom\u00e9na se sice jmenuje nocookie, z\u00e1pis\u016fm do prohl\u00ed\u017ee\u010de se ale nevyhnete ani bez jedin\u00e9ho kliknut\u00ed. Snadno si to ov\u011b\u0159\u00edte sami: otev\u0159ete DevTools, z\u00e1lo\u017eku Application \u2192 Local Storage.<\/li>\n\n\n\n<li>Jakmile n\u00e1v\u0161t\u011bvn\u00edk klikne na Play, nastav\u00ed se plnohodnotn\u00e9 YouTube cookies. Od tohohle okam\u017eiku se chov\u00e1n\u00ed prakticky neli\u0161\u00ed od b\u011b\u017en\u00e9ho embedu.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"391\" data-src=\"https:\/\/www.sabatka.net\/wp-content\/uploads\/2026\/07\/youtube-nocookie-1024x391.png\" alt=\"\" class=\"wp-image-1260 lazyload\" data-srcset=\"https:\/\/www.sabatka.net\/wp-content\/uploads\/2026\/07\/youtube-nocookie-1024x391.png 1024w, https:\/\/www.sabatka.net\/wp-content\/uploads\/2026\/07\/youtube-nocookie-300x115.png 300w, https:\/\/www.sabatka.net\/wp-content\/uploads\/2026\/07\/youtube-nocookie-768x293.png 768w, https:\/\/www.sabatka.net\/wp-content\/uploads\/2026\/07\/youtube-nocookie-1536x587.png 1536w, https:\/\/www.sabatka.net\/wp-content\/uploads\/2026\/07\/youtube-nocookie-2048x782.png 2048w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/391;\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Jednu v\u011bc bych r\u00e1d preventivn\u011b vyvr\u00e1til: nejde o to, \u017ee by Google nez\u00e1konn\u011b pos\u00edlal data do USA. Google je od roku 2023 certifikovan\u00fd v programu EU-US Data Privacy Framework, tak\u017ee tenhle konkr\u00e9tn\u00ed stra\u0161\u00e1k neplat\u00ed. J\u00e1dro probl\u00e9mu je jinde \u2014 embed YouTube videa nen\u00ed nezbytn\u00fd pro provoz webu, tak\u017ee podle ePrivacy sm\u011brnice a GDPR vy\u017eaduje aktivn\u00ed souhlas. V \u010cesku to plat\u00ed v opt-in re\u017eimu od novely z\u00e1kona o elektronick\u00fdch komunikac\u00edch, <a href=\"https:\/\/www.sabatka.net\/cs\/gdpr-cookie-bars-finaly-in-czechia\/\">\u00fa\u010dinn\u00e9 od ledna 2022<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tak\u017ee: youtube-nocookie je legitimn\u00ed krok. Omezuje personalizaci a na rozd\u00edl od b\u011b\u017en\u00e9ho embedu, kter\u00fd ukl\u00e1d\u00e1 YouTube cookies hned p\u0159i na\u010dten\u00ed str\u00e1nky, je nastav\u00ed a\u017e ve chv\u00edli, kdy n\u00e1v\u0161t\u011bvn\u00edk klikne na Play. S\u00e1m o sob\u011b ale souhlas ne\u0159e\u0161\u00ed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nejhor\u0161\u00ed varianta: p\u0159epis dom\u00e9ny JavaScriptem po na\u010dten\u00ed str\u00e1nky<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kdy\u017e jsem hledal, jak lid\u00e9 s t\u00edmhle probl\u00e9mem u n\u00e1s z\u00e1pas\u00ed, narazil jsem na n\u00e1vody (a to i od ofici\u00e1ln\u00edho poskytovatele cookie li\u0161ty), kter\u00e9 doporu\u010duj\u00ed elegantn\u00ed trik: nech\u00e1te web vykreslit b\u011b\u017en\u00fd YouTube embed a pak JavaScriptem po na\u010dten\u00ed str\u00e1nky p\u0159ep\u00ed\u0161ete atribut <code>src<\/code> z <a href=\"http:\/\/youtube.com\" target=\"_blank\" rel=\"noopener\">youtube.com<\/a> na <a href=\"http:\/\/youtube-nocookie.com\" target=\"_blank\" rel=\"noopener\">youtube-nocookie.com<\/a>. Vypad\u00e1 to chyt\u0159e. Technicky to ale ned\u00e1v\u00e1 smysl.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Prohl\u00ed\u017ee\u010d za\u010d\u00edn\u00e1 stahovat obsah iframe ve chv\u00edli, kdy naraz\u00ed na jeho <code>src<\/code> atribut v HTML \u2014 tedy d\u0159\u00edv, ne\u017e se stihne spustit v\u00e1\u0161 JavaScript, kter\u00fd ho m\u00e1 p\u0159epsat. Vznik\u00e1 souboj o milisekundy: request na <a href=\"http:\/\/youtube.com\" target=\"_blank\" rel=\"noopener\">youtube.com<\/a> m\u016f\u017ee odej\u00edt d\u0159\u00edv, ne\u017e ho skript sta\u010d\u00ed opravit. Jak rychle k tomu dojde, z\u00e1vis\u00ed na tom, kde ve str\u00e1nce se skript nach\u00e1z\u00ed, jak je str\u00e1nka vykreslovan\u00e1 a kolik dal\u0161\u00edho k\u00f3du b\u011b\u017e\u00ed p\u0159ed n\u00edm. Na ochranu osobn\u00edch \u00fadaj\u016f takov\u00fd mechanismus rozhodn\u011b nen\u00ed spolehliv\u00fd.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nav\u00edc \u2014 st\u00e1le jde o to, \u017ee v\u00e1\u0161 web d\u011bl\u00e1 request na ciz\u00ed dom\u00e9nu a p\u0159en\u00e1\u0161\u00ed tam data. GDPR to nijak ne\u0159e\u0161\u00ed, jen to oblafne lidi, co tomu nerozum\u00ed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Tohle je p\u0159esn\u011b ten typ detailu, kter\u00fd v auditu cookie li\u0161ty a vlo\u017een\u00e9ho obsahu vid\u00edm pravideln\u011b \u2014 net\u00fdk\u00e1 se to jen YouTube, ale v\u0161eho, co web natahuje odjinud, podobn\u011b jako <a href=\"https:\/\/www.sabatka.net\/cs\/who-reads-forms-on-your-website-and-do-you-know-about-it\/\">reklamn\u00ed pixely automaticky \u010dtou formul\u00e1\u0159e na webu<\/a>. Pokud si nejste jist\u00ed, co v\u00e1\u0161 web pos\u00edl\u00e1 d\u00e1l, d\u00e1 se to <a href=\"https:\/\/www.sabatka.net\/cs\/sluzby\/\">ov\u011b\u0159it v auditu<\/a>.<\/em><\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"1024\" data-src=\"https:\/\/www.sabatka.net\/wp-content\/uploads\/2026\/04\/null-did-you-know.png\" alt=\"V\u011bd\u011bli jste? \u2014 informa\u010dn\u00ed panel\" class=\"wp-image-936 lazyload\" data-srcset=\"https:\/\/www.sabatka.net\/wp-content\/uploads\/2026\/04\/null-did-you-know.png 1024w, https:\/\/www.sabatka.net\/wp-content\/uploads\/2026\/04\/null-did-you-know-300x300.png 300w, https:\/\/www.sabatka.net\/wp-content\/uploads\/2026\/04\/null-did-you-know-150x150.png 150w, https:\/\/www.sabatka.net\/wp-content\/uploads\/2026\/04\/null-did-you-know-768x768.png 768w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/1024;\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\"><strong><strong>V\u011bdeck\u00e1 pozn\u00e1mka<\/strong><\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Dokud n\u00e1v\u0161t\u011bvn\u00edk neklikne na n\u00e1hled videa, je str\u00e1nka z\u00e1rove\u0148 ve dvou stavech: \u201evideo je tu&#8220; i \u201evideo tu nen\u00ed&#8220;. Rozhodne to a\u017e samotn\u00fd klik \u2014 trochu jako <a href=\"https:\/\/cs.wikipedia.org\/wiki\/Schr%C3%B6dingerova_ko%C4%8Dka\" target=\"_blank\" rel=\"noopener\">Schr\u00f6dingerova ko\u010dka<\/a>, jen m\u00edsto krabice m\u00e1te iframe a m\u00edsto jedu souhlas. A p\u0159esn\u011b na tomhle principu funguje \u0159e\u0161en\u00ed, ke kter\u00e9mu se te\u010f dost\u00e1v\u00e1me.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Skute\u010dn\u00e9 \u0159e\u0161en\u00ed: dv\u011b vrstvy, ne jedna<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pro skute\u010dn\u011b \u010dist\u00e9 \u0159e\u0161en\u00ed je pot\u0159eba ud\u011blat dv\u011b v\u011bci: zm\u011bnit dom\u00e9nu embedu u\u017e na serveru a na\u010d\u00edtat samotn\u00e9 video a\u017e ve chv\u00edli, kdy o n\u011bj n\u00e1v\u0161t\u011bvn\u00edk s\u00e1m po\u017e\u00e1d\u00e1. Poj\u010fme na n\u011b popo\u0159ad\u011b.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Vrstva 1 \u2014 zm\u011bna dom\u00e9ny na serveru, ne v prohl\u00ed\u017ee\u010di<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pokud embed opravdu pot\u0159ebujete nat\u00e1hnout hned (typicky proto, \u017ee souhlas u\u017e byl d\u0159\u00edv ud\u011blen a video se m\u00e1 p\u0159ehr\u00e1t rovnou), dom\u00e9nu p\u0159epi\u0161te tam, kde vznik\u00e1 HTML \u2014 na serveru, v \u0161ablon\u011b nebo p\u0159es filtr obsahu va\u0161eho redak\u010dn\u00edho syst\u00e9mu. Na WordPressu to typicky znamen\u00e1 z\u00e1sah do filtru, kter\u00fd upravuje obsah p\u0159i vykreslov\u00e1n\u00ed str\u00e1nky (nap\u0159. <code>the_content<\/code>), nebo \u00fapravu \u0161ablony, kter\u00e1 embed generuje \u2014 ne skript b\u011b\u017e\u00edc\u00ed a\u017e v prohl\u00ed\u017ee\u010di. Na jin\u00fdch syst\u00e9mech hledejte stejn\u00e9 m\u00edsto \u2014 tam, kde se HTML sestavuje na serveru, ne tam, kde ho prohl\u00ed\u017ee\u010d jen zobrazuje. Prohl\u00ed\u017ee\u010d pak nikdy nedostane \u0161anci kontaktovat <a href=\"http:\/\/youtube.com\" target=\"_blank\" rel=\"noopener\">youtube.com<\/a>, proto\u017ee v HTML, kter\u00e9 mu p\u0159ijde, je od za\u010d\u00e1tku jen <a href=\"http:\/\/youtube-nocookie.com\" target=\"_blank\" rel=\"noopener\">youtube-nocookie.com<\/a>. \u017d\u00e1dn\u00fd souboj o milisekundy, \u017e\u00e1dn\u00e9 spol\u00e9h\u00e1n\u00ed na to, jestli se skript stihne spustit v\u010das.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do zad\u00e1n\u00ed pro v\u00fdvoj\u00e1\u0159e nebo agenturu pat\u0159\u00ed p\u0159esn\u011b tahle v\u011bta: dom\u00e9na se m\u011bn\u00ed na backendu p\u0159i generov\u00e1n\u00ed str\u00e1nky, ne JavaScriptem po jej\u00edm na\u010dten\u00ed.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Vrstva 2 \u2014 video se na\u010dte a\u017e po kliknut\u00ed na n\u00e1hled (facade pattern)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Facade pattern je v EU b\u011b\u017en\u011b doporu\u010dovan\u00fd postup \u2014 dvouklikov\u00e9 \u0159e\u0161en\u00ed (two-click) m\u00e1 dlouhou tradici hlavn\u011b v N\u011bmecku \u2014 a princip je jednoduch\u00fd: m\u00edsto iframe se na str\u00e1nce zobraz\u00ed statick\u00fd n\u00e1hledov\u00fd obr\u00e1zek s tla\u010d\u00edtkem Play. Skute\u010dn\u00fd YouTube iframe (na nocookie dom\u00e9n\u011b) se nat\u00e1hne, teprve kdy\u017e n\u00e1v\u0161t\u011bvn\u00edk na n\u00e1hled klikne \u2014 p\u0159esn\u011b ten moment ze Schr\u00f6dingerovy ko\u010dky, kdy se rozhodne, jestli video \u201eje&#8220; nebo \u201enen\u00ed&#8220;.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\">\n  <div class=\"yt-facade\" data-video-id=\"hDaMPFwB3B4\" role=\"button\" tabindex=\"0\" aria-label=\"P\u0159ehr\u00e1t video z YouTube (na\u010dte se a\u017e po kliknut\u00ed)\">\n    <img decoding=\"async\" data-src=\"https:\/\/www.sabatka.net\/wp-content\/uploads\/2026\/07\/youtube-preview.jpg\" alt=\"N\u00e1hled YouTube videa\" width=\"720\" height=\"405\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 720px; --smush-placeholder-aspect-ratio: 720\/405;\">\n    <span class=\"yt-facade__play\" aria-hidden=\"true\"><\/span>\n    <p class=\"yt-facade__note\">Kliknut\u00edm na\u010dtete video z YouTube, co\u017e m\u016f\u017ee zahrnovat p\u0159enos dat spole\u010dnosti Google. <a href=\"https:\/\/www.sabatka.net\/cs\/privacy-policy\/\">V\u00edce&nbsp;informac\u00ed<\/a><\/p>\n  <\/div>\n<\/div>\n\n\n<style>\n.yt-facade { position: relative; display: block; cursor: pointer; width: 100%; max-width: 720px; }\n.yt-facade img { display: block; width: 100%; height: auto; }\n.yt-facade__play {\n  position: absolute; inset: 0; margin: auto; width: 68px; height: 48px;\n  background: rgba(0, 0, 0, .75);\n  border-radius: 10px;\n}\n.yt-facade__play::before {\n  content: \"\";\n  position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);\n  border-style: solid; border-width: 12px 0 12px 20px;\n  border-color: transparent transparent transparent #fff;\n}\n.yt-facade__note {\n  position: absolute; right: 8px; bottom: 8px; margin: 0;\n  max-width: calc(100% - 16px);\n  font-size: .75em; line-height: 1.35; text-align: right;\n  color: #fff; background: rgba(0, 0, 0, .6);\n  padding: .35em .6em; border-radius: 6px;\n}\n.yt-facade__note a { color: #fff; text-decoration: underline; }\n.yt-facade__iframe {\n  display: block; width: 100%; max-width: 720px; aspect-ratio: 16 \/ 9; border: 0;\n}\n<\/style>\n\n\n<script>\n(function () {\n  document.querySelectorAll('.yt-facade:not([data-bound])').forEach(function (facade) {\n    facade.setAttribute('data-bound', '1');\n\n    var play = function () {\n      var videoId = facade.dataset.videoId;\n\n      var iframe = document.createElement('iframe');\n      iframe.className = 'yt-facade__iframe';\n      iframe.src = 'https:\/\/www.youtube-nocookie.com\/embed\/' + videoId + '?autoplay=1';\n      iframe.title = 'P\u0159ehr\u00e1va\u010d YouTube videa';\n      iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';\n      iframe.allowFullscreen = true;\n\n      facade.replaceWith(iframe);\n    };\n\n    facade.addEventListener('click', function (event) {\n      if (event.target.closest('a')) return; \/\/ klik na odkaz nespou\u0161t\u00ed video\n      play();\n    });\n    facade.addEventListener('keydown', function (event) {\n      if (event.target.closest('a')) return; \/\/ Enter na odkazu otev\u00edr\u00e1 odkaz, ne video\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        play();\n      }\n    });\n  });\n})();\n<\/script>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Je\u0161t\u011b jeden detail \u2014 i samotn\u00fd n\u00e1hledov\u00fd obr\u00e1zek z <code>img.youtube.com<\/code> pos\u00edl\u00e1 IP adresu Googlu, proto\u017ee ho prohl\u00ed\u017ee\u010d natahuje z jeho server\u016f. Pln\u011b \u010dist\u00e9 \u0159e\u0161en\u00ed proto hostuje n\u00e1hledy lok\u00e1ln\u011b \u2014 st\u00e1hnete si je jednou p\u0159i publikaci obsahu a serv\u00edrujete je z vlastn\u00ed dom\u00e9ny. Teprve klik na Play spou\u0161t\u00ed cokoliv, co komunikuje s Googlem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Implementaci si nemus\u00edte vym\u00fd\u0161let od nuly \u2014 existuj\u00ed hotov\u00e1 \u0159e\u0161en\u00ed tohoto principu (nap\u0159. open-source komponenta lite-youtube-embed nebo pluginy pro WordPress, kter\u00e9 facade pattern implementuj\u00ed).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pokud chcete vid\u011bt princip p\u0159\u00edmo v k\u00f3du, tady je minim\u00e1ln\u00ed funk\u010dn\u00ed p\u0159\u00edklad bez z\u00e1vislost\u00ed \u2014 HTML n\u00e1hled, CSS pro tla\u010d\u00edtko Play a JavaScript, kter\u00fd teprve po kliknut\u00ed vytvo\u0159\u00ed skute\u010dn\u00fd iframe:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;div class=\"yt-facade\" data-video-id=\"KOD_VIDEA\" role=\"button\" tabindex=\"0\" aria-label=\"P\u0159ehr\u00e1t video z YouTube (na\u010dte se a\u017e po kliknut\u00ed)\">\n  &lt;img src=\"\/MUJ_OBRAZEK.jpg\" alt=\"N\u00e1hled YouTube videa\" width=\"720\" height=\"405\" loading=\"lazy\">\n  &lt;span class=\"yt-facade__play\" aria-hidden=\"true\">&lt;\/span>\n    &lt;p class=\"yt-facade__note\">Kliknut\u00edm na\u010dtete video z YouTube, co\u017e m\u016f\u017ee zahrnovat p\u0159enos dat spole\u010dnosti Google. &lt;a href=\"\/privacy-policy\/\">V\u00edce&nbsp;informac\u00ed&lt;\/a>&lt;\/p>\n&lt;\/div>\n\n&lt;style>\n.yt-facade { position: relative; display: block; cursor: pointer; width: 100%; max-width: 720px; }\n.yt-facade img { display: block; width: 100%; height: auto; }\n.yt-facade__play {\n  position: absolute; inset: 0; margin: auto; width: 68px; height: 48px;\n  background: rgba(0, 0, 0, .75);\n  border-radius: 10px;\n}\n.yt-facade__play::before {\n  content: \"\";\n  position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);\n  border-style: solid; border-width: 12px 0 12px 20px;\n  border-color: transparent transparent transparent #fff;\n}\n.yt-facade__note {\n  position: absolute; right: 8px; bottom: 8px; margin: 0;\n  max-width: calc(100% - 16px);\n  font-size: .75em; line-height: 1.35; text-align: right;\n  color: #fff; background: rgba(0, 0, 0, .6);\n  padding: .35em .6em; border-radius: 6px;\n}\n.yt-facade__note a { color: #fff; text-decoration: underline; }\n.yt-facade__iframe {\n  display: block; width: 100%; max-width: 720px; aspect-ratio: 16 \/ 9;\nborder: 0;\n}\n&lt;\/style>\n\n&lt;script>\n(function () {\ndocument.querySelectorAll('.yt-facade:not(&#91;data-bound&#93;)').forEach(function\n(facade) {\n    facade.setAttribute('data-bound', '1');\n\n    var play = functio\n      var videoId = facade.dataset.videoId;\n\n      var iframe = doc;\n      iframe.className = 'yt-facade__iframe';\n      iframe.src = 'https:\/\/www.youtube-nocookie.com\/embed\/' + videoId +\n'?autoplay=1';\n      iframe.title = 'P\u0159ehr\u00e1va\u010d YouTube videa';\n      iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';\n      iframe.allowFullscreen = true;\n\n      facade.replaceWith(iframe);\n    };\n\n    facade.addEventList) {\n      if (event.target.closest('a')) return; \/\/ klik na odkaz nespou\u0161t\u00ed video\n      play();\n    });\n    facade.addEventListener('keydown', function (event) {\n      if (event.target.closest('a')) return; \/\/ Enter na odkazu otev\u00edr\u00e1 odkaz, ne video\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventD\n        play();\n      }\n    });\n  });\n})();\n&lt;\/script><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">yt-facade<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">data-video-id<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">KOD_VIDEA<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">role<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">button<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">tabindex<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">0<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">aria-label<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">P\u0159ehr\u00e1t video z YouTube (na\u010dte se a\u017e po kliknut\u00ed)<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;img<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">\/MUJ_OBRAZEK.jpg<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">alt<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">N\u00e1hled YouTube videa<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">width<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">720<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">height<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">405<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">loading<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">lazy<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">yt-facade__play<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">aria-hidden<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">true<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/span&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;p<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">yt-facade__note<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Kliknut\u00edm na\u010dtete video z YouTube, co\u017e m\u016f\u017ee zahrnovat p\u0159enos dat spole\u010dnosti Google. <\/span><span style=\"color: #81A1C1\">&lt;a<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">\/privacy-policy\/<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">V\u00edce\u00a0informac\u00ed<\/span><span style=\"color: #81A1C1\">&lt;\/a&gt;&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">.<\/span><span style=\"color: #8FBCBB\">yt-facade<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">relative;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">display<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">block;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">cursor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">pointer;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">max-width<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">720<\/span><span style=\"color: #81A1C1\">px;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">.<\/span><span style=\"color: #8FBCBB\">yt-facade<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">img<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">display<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">block;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">auto;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">.<\/span><span style=\"color: #8FBCBB\">yt-facade__play<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">absolute;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">inset<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">margin<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">auto;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">68<\/span><span style=\"color: #81A1C1\">px;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">48<\/span><span style=\"color: #81A1C1\">px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">.75<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">border-radius<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">10<\/span><span style=\"color: #81A1C1\">px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">.<\/span><span style=\"color: #8FBCBB\">yt-facade__play<\/span><span style=\"color: #81A1C1\">::<\/span><span style=\"color: #8FBCBB\">before<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">content<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">absolute;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">left<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">54<\/span><span style=\"color: #81A1C1\">%;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">translate<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">-50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">-50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">border-style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">solid;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">border-width<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">12<\/span><span style=\"color: #81A1C1\">px<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">12<\/span><span style=\"color: #81A1C1\">px<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">20<\/span><span style=\"color: #81A1C1\">px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">border-color<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">transparent<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #81A1C1\">transparent<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #81A1C1\">transparent<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #ECEFF4\">#<\/span><span style=\"color: #B48EAD\">fff<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">.<\/span><span style=\"color: #8FBCBB\">yt-facade__note<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">absolute;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">right<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">8<\/span><span style=\"color: #81A1C1\">px;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">bottom<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">8<\/span><span style=\"color: #81A1C1\">px;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">margin<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">max-width<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">calc<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">16<\/span><span style=\"color: #81A1C1\">px<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font-size<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">.75<\/span><span style=\"color: #81A1C1\">em;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">line-height<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1.35<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">text-align<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">right;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">#<\/span><span style=\"color: #B48EAD\">fff<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">.6<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">.35<\/span><span style=\"color: #81A1C1\">em<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">.6<\/span><span style=\"color: #81A1C1\">em;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">border-radius<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">6<\/span><span style=\"color: #81A1C1\">px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">.<\/span><span style=\"color: #8FBCBB\">yt-facade__note<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">a<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">#<\/span><span style=\"color: #B48EAD\">fff<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">text-decoration<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">underline;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">.<\/span><span style=\"color: #8FBCBB\">yt-facade__iframe<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">display<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">block;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">max-width<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">720<\/span><span style=\"color: #81A1C1\">px;<\/span><span style=\"color: #D8DEE9FF\"> aspect-ratio<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">16<\/span><span style=\"color: #88C0D0\"> \/ <\/span><span style=\"color: #B48EAD\">9<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/style&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">querySelectorAll<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">.yt-facade:not(&#91;data-bound&#93;)<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">forEach<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">function<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">facade<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">facade<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setAttribute<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">data-bound<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">1<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">play<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">functio<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">videoId<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">facade<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">dataset<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">videoId<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">iframe<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">doc<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">iframe<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">className<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">yt-facade__iframe<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">iframe<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">src<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/www.youtube-nocookie.com\/embed\/<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">videoId<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">?autoplay=1<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">iframe<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">title<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">P\u0159ehr\u00e1va\u010d YouTube videa<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">iframe<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">allow<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">iframe<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">allowFullscreen<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">true;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">facade<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">replaceWith<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">iframe<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">facade<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">addEventList<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">event<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">target<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">closest<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">a<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)) <\/span><span style=\"color: #81A1C1\">return;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ klik na odkaz nespou\u0161t\u00ed video<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">play<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">facade<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">keydown<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">event<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">event<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">target<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">closest<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">a<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)) <\/span><span style=\"color: #81A1C1\">return;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ Enter na odkazu otev\u00edr\u00e1 odkaz, ne video<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">event<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">key<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">===<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Enter<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">||<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">event<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">key<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">===<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">event<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">preventD<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">play<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">})()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">T\u0159i v\u011bci v tomhle k\u00f3du d\u011blaj\u00ed rozd\u00edl mezi \u201evypad\u00e1 to \u010dist\u011b&#8220; a \u201eje to \u010dist\u00e9&#8220;:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Do HTML str\u00e1nky nejde \u017e\u00e1dn\u00fd iframe ani skript, kter\u00fd by ho natahoval p\u0159i na\u010dten\u00ed<\/strong> \u2014 jen <code>div<\/code> s obr\u00e1zkem. Prohl\u00ed\u017ee\u010d se server\u016f YouTube nedotkne, dokud se nespust\u00ed funkce <code>play()<\/code>. Nov\u011b vytvo\u0159en\u00fd iframe nav\u00edc dost\u00e1v\u00e1 vlastn\u00ed CSS t\u0159\u00eddu (<code>yt-facade__iframe<\/code>), tak\u017ee z\u016fst\u00e1v\u00e1 stejn\u011b responzivn\u00ed jako n\u00e1hled, kter\u00fd nahradil \u2014 ne pevn\u011b velk\u00fd prvek zafixovan\u00fd na rozm\u011br z okam\u017eiku kliknut\u00ed.<\/li>\n\n\n\n<li><strong><code>facade.replaceWith(iframe)<\/code> b\u011b\u017e\u00ed v\u00fdhradn\u011b z kliknut\u00ed nebo kl\u00e1vesov\u00e9 akce<\/strong> \u2014 <code>click<\/code> a <code>keydown<\/code> (Enter nebo mezern\u00edk). Parametr <code>autoplay=1<\/code> v URL pak funguje bez probl\u00e9m\u016f, proto\u017ee ho prohl\u00ed\u017ee\u010d vyhodnot\u00ed jako reakci na akci u\u017eivatele, ne jako automatick\u00e9 spu\u0161t\u011bn\u00ed \u2014 pom\u00e1h\u00e1 tomu i atribut <code>iframe.allow<\/code> s hodnotou <code>autoplay<\/code> o p\u00e1r \u0159\u00e1dk\u016f v\u00fd\u0161.<\/li>\n\n\n\n<li><strong><code>role=\"button\"<\/code> a <code>tabindex=\"0\"<\/code><\/strong> d\u011blaj\u00ed z n\u00e1hledu ovladateln\u00fd prvek i pro lidi, co web ovl\u00e1daj\u00ed kl\u00e1vesnic\u00ed nebo \u010dte\u010dkou obrazovky \u2014 bez toho by facade pro n\u011b byl jen neklikateln\u00fd obr\u00e1zek. <code>noscript<\/code> fallback zase \u0159e\u0161\u00ed situaci, kdy m\u00e1 n\u00e1v\u0161t\u011bvn\u00edk JavaScript vypnut\u00fd \u2014 dostane aspo\u0148 p\u0159\u00edm\u00fd odkaz na YouTube, ne mrtv\u00fd n\u00e1hled.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">A ten lok\u00e1ln\u011b hostovan\u00fd n\u00e1hled zm\u00edn\u011bn\u00fd v\u00fd\u0161e? St\u00e1hnete si ho jednou (nap\u0159. z <code>img.youtube.com\/vi\/ID_VASEHO_VIDEA\/maxresdefault.jpg<\/code> v moment\u011b, kdy obsah publikujete) a ulo\u017e\u00edte na vlastn\u00ed server nebo CDN. Pozor \u2014 <code>maxresdefault.jpg<\/code> existuje jen u \u010d\u00e1sti vide\u00ed (typicky ne u star\u0161\u00edch nebo u vide\u00ed mimo pom\u011br 16:9), tak\u017ee si p\u0159ed nasazen\u00edm ov\u011b\u0159te, \u017ee se soubor opravdu st\u00e1hl. Jako bezpe\u010dn\u011bj\u0161\u00ed v\u00fdchoz\u00ed volbu pou\u017eijte <code>hqdefault.jpg<\/code>, kter\u00fd je dostupn\u00fd prakticky v\u017edy. \u017d\u00e1dn\u00fd \u017eiv\u00fd request na Google p\u0159i na\u010dten\u00ed str\u00e1nky. Tla\u010d\u00edtko Play nav\u00edc nen\u00ed samostatn\u00fd obr\u00e1zek, ale <code>.yt-facade__play<\/code> vykreslen\u00fd \u010dist\u011b p\u0159es CSS \u2014 tak\u017ee ne\u0159e\u0161\u00edte druhou sadu asset\u016f pro <code>hover<\/code> nebo <code>focus<\/code> stav, jen barvu a st\u00edn.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pozn\u00e1mka na okraj: <code>videoId<\/code> jde v k\u00f3du p\u0159\u00edmo do URL iframe. Pokud poch\u00e1z\u00ed z vlastn\u00edho pole v CMS, kter\u00e9 upravuje jen redaktor s pr\u00e1vy, je to v po\u0159\u00e1dku. Pokud by mohlo p\u0159ij\u00edt z libovoln\u00e9ho u\u017eivatelsk\u00e9ho vstupu, validujte form\u00e1t (11 znak\u016f, p\u00edsmena, \u010d\u00edsla, poml\u010dka, podtr\u017e\u00edtko), ne\u017e se dostane do adresy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pokud si k\u00f3d nechcete ps\u00e1t ru\u010dn\u011b, d\u011bl\u00e1 p\u0159esn\u011b tohle i zm\u00edn\u011bn\u00e1 komponenta lite-youtube-embed nebo odpov\u00eddaj\u00edc\u00ed WordPress plugin \u2014 princip z\u016fst\u00e1v\u00e1 stejn\u00fd, jen ho za v\u00e1s implementuje hotov\u00e1 knihovna.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">U n\u00e1hledu se nav\u00edc vyplat\u00ed napsat jednu v\u011btu o tom, co se po kliknut\u00ed stane \u2014 t\u0159eba \u201eKliknut\u00edm na\u010dtete video z YouTube, co\u017e m\u016f\u017ee zahrnovat p\u0159enos dat spole\u010dnosti Google.&#8220; Nen\u00ed to pr\u00e1vni\u010dina, je to informace pro \u010dlov\u011bka.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Implementace z praxe<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Realita b\u00fdv\u00e1 m\u00ed\u0148 \u010dernob\u00edl\u00e1, ne\u017e toto \u0159e\u0161en\u00ed nazna\u010duje. U jednoho klienta jsme narazili na web, kde popisky produkt\u016f \u2014 v\u010detn\u011b vide\u00ed \u2014 tahal JavaScript z extern\u00ed slu\u017eby t\u0159et\u00ed strany, do jej\u00ed\u017e integrace jsme nem\u011bli p\u0159\u00edstup. P\u0159ed\u011blat cel\u00fd tenhle feed na 100 % \u010dist\u00e9 \u0159e\u0161en\u00ed s lok\u00e1ln\u00edmi n\u00e1hledy nebylo technicky re\u00e1ln\u00e9. Z\u016fstalo se aspo\u0148 u p\u0159episu dom\u00e9ny na nocookie jako pragmatick\u00e9ho zlep\u0161en\u00ed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nen\u00ed to dokonal\u00e9. Ale je to lep\u0161\u00ed ne\u017e nic, a hlavn\u011b jsme p\u0159esn\u011b v\u011bd\u011bli, co za riziko klientovi zb\u00fdv\u00e1 \u2014 a napsali jsme to do podm\u00ednek webu. Sv\u011bt nen\u00ed \u010dernob\u00edl\u00fd. I \u010d\u00e1ste\u010dn\u00e9 zlep\u0161en\u00ed m\u00e1 cenu, pokud v\u00edte, co v\u00e1m po n\u011bm je\u0161t\u011b zb\u00fdv\u00e1 vy\u0159e\u0161it.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u0158ekn\u011bte to v podm\u00ednk\u00e1ch lidsky, ne pr\u00e1vni\u010dinou<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A\u0165 zvol\u00edte kteroukoliv kombinaci obou vrstev, pat\u0159\u00ed to do cookie li\u0161ty a z\u00e1sad ochrany osobn\u00edch \u00fadaj\u016f \u2014 srozumitelnou v\u011btou, ne odstavcem pr\u00e1vni\u010diny. N\u011bco jako: \u201eVidea z YouTube se na t\u00e9to str\u00e1nce na\u010d\u00edtaj\u00ed a\u017e po va\u0161em souhlasu. Po kliknut\u00ed na n\u00e1hled dojde k p\u0159enosu dat spole\u010dnosti Google, v\u010detn\u011b IP adresy.&#8220;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tahle \u010d\u00e1st se \u010dasto odbude, proto\u017ee nejde o metriku, kterou by n\u011bkdo hl\u00eddal v dashboardu. Ve stejn\u00e9 kategorii chyb jsem popisoval <a href=\"https:\/\/www.sabatka.net\/cs\/5-most-common-bugs-in-cookie-bar-configuration\/\">5 nej\u010dast\u011bj\u0161\u00edch chyb v nastaven\u00ed cookie li\u0161ty<\/a> \u2014 z audit\u016f mi vych\u00e1z\u00ed, \u017ee zhruba t\u0159etina firem m\u00e1 cookie li\u0161tu nastavenou \u0161patn\u011b. Vlo\u017een\u00fd YouTube je jen dal\u0161\u00ed komponenta, kde se stejn\u00e1 chyba opakuje, jen si toho nikdo nev\u0161imne, dokud se na to nikdo nepod\u00edv\u00e1 zbl\u00edzka.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Shrnut\u00ed<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e1m o sob\u011b youtube-nocookie GDPR ne\u0159e\u0161\u00ed \u2014 omez\u00ed personalizaci p\u0159ehr\u00e1v\u00e1n\u00ed a reklam, ale neblokuje p\u0159enos IP adresy p\u0159i na\u010dten\u00ed ani z\u00e1pis identifik\u00e1tor\u016f do prohl\u00ed\u017ee\u010de. Skute\u010dn\u00e9 \u0159e\u0161en\u00ed stoj\u00ed na dvou v\u011bcech: dom\u00e9nu m\u011b\u0148te na backendu, nikdy JavaScriptem po na\u010dten\u00ed str\u00e1nky, a video na\u010d\u00edtejte a\u017e ve chv\u00edli, kdy na n\u00e1hled n\u011bkdo klikne (facade pattern).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pokud si po p\u0159e\u010dten\u00ed nejste jist\u00ed, jestli v\u00e1\u0161 web d\u011bl\u00e1 aspo\u0148 tu prvn\u00ed vrstvu po\u0159\u00e1dn\u011b, stoj\u00ed za to se na to pod\u00edvat spole\u010dn\u011b \u2014 v jednom auditu se obvykle najde v\u00edc ne\u017e jen YouTube. <a href=\"https:\/\/www.sabatka.net\/cs\/kontakt\/\">Domluvme si konzultaci<\/a>.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button scroll_to_subscribe\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Chci odeb\u00edrat novinky<\/a><\/div>\n\n\n\n<div class=\"wp-block-button linkedinShare\"><a class=\"wp-block-button__link wp-element-button\">Sd\u00edlet na LinkedIN<\/a><\/div>\n<\/div>\n\n\n<p>","protected":false},"excerpt":{"rendered":"<p>Vkl\u00e1d\u00e1te na web YouTube video? Pak \u0159e\u0161\u00edte GDPR, i kdy\u017e jste o tom mo\u017en\u00e1 nikdy nep\u0159em\u00fd\u0161leli. A pokud jste to u\u017e \u0159e\u0161ili tak, \u017ee jste p\u0159epnuli embed na dom\u00e9nu youtube-nocookie.com, m\u00e1m pro v\u00e1s nep\u0159\u00edjemnou zpr\u00e1vu: nen\u00ed to \u0159e\u0161en\u00ed zcela v souladu s GDPR. Je to krok spr\u00e1vn\u00fdm sm\u011brem. Nen\u00ed to hotovo. P\u0159ed p\u00e1r m\u011bs\u00edci jsem [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1311,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,8],"tags":[],"class_list":["post-1259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-analytics","category-gdpr"],"_links":{"self":[{"href":"https:\/\/www.sabatka.net\/cs\/wp-json\/wp\/v2\/posts\/1259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sabatka.net\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sabatka.net\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sabatka.net\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sabatka.net\/cs\/wp-json\/wp\/v2\/comments?post=1259"}],"version-history":[{"count":35,"href":"https:\/\/www.sabatka.net\/cs\/wp-json\/wp\/v2\/posts\/1259\/revisions"}],"predecessor-version":[{"id":1312,"href":"https:\/\/www.sabatka.net\/cs\/wp-json\/wp\/v2\/posts\/1259\/revisions\/1312"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sabatka.net\/cs\/wp-json\/wp\/v2\/media\/1311"}],"wp:attachment":[{"href":"https:\/\/www.sabatka.net\/cs\/wp-json\/wp\/v2\/media?parent=1259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sabatka.net\/cs\/wp-json\/wp\/v2\/categories?post=1259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sabatka.net\/cs\/wp-json\/wp\/v2\/tags?post=1259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}