{"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\/en\/youtube-nocookie-gdpr\/","title":{"rendered":"youtube-nocookie GDPR compliance: why it falls short (and what to do instead)"},"content":{"rendered":"<\/p>\n\n\n<p class=\"wp-block-paragraph\">Embedding a YouTube video on your site? Then you&#8217;re dealing with GDPR, whether you&#8217;ve thought about it or not. And if you already &#8220;solved&#8221; this by switching the embed to the <a href=\"http:\/\/youtube-nocookie.com\/\" target=\"_blank\" rel=\"noopener\">youtube-nocookie.com<\/a> domain, here&#8217;s the uncomfortable part: that alone doesn&#8217;t get you full youtube-nocookie GDPR compliance. It&#8217;s a step in the right direction. It&#8217;s not the finish line.<\/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=\"https:\/\/www.sabatka.net\/en\/kontakt\/\">Contact me<\/a><\/div>\n\n\n\n<div class=\"wp-block-button linkedinShare\"><a class=\"wp-block-button__link wp-element-button\">Share on 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\">A few months back I wrote about a court in Hannover ruling that <a href=\"https:\/\/www.sabatka.net\/en\/gtm-v-rozporu-s-gdpr\/\">Google Tag Manager without consent violates GDPR<\/a> \u2014 simply because GTM itself can load third-party code. A YouTube embed is the same story wearing a different costume: a foreign domain, a foreign script, a foreign server that gets your visitor&#8217;s IP address before they click on anything. This article picks up where that one left off \u2014 same plot, different lead actor.<\/p>\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\">A few months back I wrote about a court in Hannover ruling that <a href=\"https:\/\/www.sabatka.net\/en\/gtm-v-rozporu-s-gdpr\/\">Google Tag Manager without consent violates GDPR<\/a> \u2014 simply because GTM itself can load third-party code. A YouTube embed is the same story wearing a different costume: a foreign domain, a foreign script, a foreign server that gets your visitor&#8217;s IP address before they click on anything. This article picks up where that one left off \u2014 same plot, different lead actor.<\/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 compliance: what Google promises and what it leaves out<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The apparent fix has an official name \u2014 Google calls it Privacy Enhanced Mode. It promises exactly two things:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Watching a video through the nocookie domain won&#8217;t feed into personalization of the viewer&#8217;s YouTube experience.<\/li>\n\n\n\n<li>Any ads shown alongside the video won&#8217;t be personalized either.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s <a href=\"https:\/\/support.google.com\/youtube\/answer\/171780\" target=\"_blank\" rel=\"noopener\">the entire official promise<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Notice what&#8217;s missing. Google never says that nothing gets stored about the view. It never says no data is transmitted at all. It promises non-personalization \u2014 not anonymity.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Reality sits exactly in between those two claims:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Simply loading a page with the embed \u2014 even on the nocookie domain \u2014 sends your visitor&#8217;s IP address to Google&#8217;s servers. That&#8217;s a fact, not an interpretation: it&#8217;s a transfer of personal data.<\/li>\n\n\n\n<li><a href=\"http:\/\/youtube-nocookie.com\" target=\"_blank\" rel=\"noopener\">youtube-nocookie.com<\/a> writes to the browser the moment the page loads, before anyone clicks anything. I tested this myself: as soon as the embed loaded, two entries appeared in localStorage \u2014 <code>yt-icons-last-purged<\/code> and <code>ytidb::LAST_RESULT_ENTRY_KEY<\/code>. The domain says &#8220;nocookie,&#8221; but you don&#8217;t avoid writes to the browser just by not clicking. You can check this yourself: open DevTools, go to Application \u2192 Local Storage.<\/li>\n\n\n\n<li>The moment a visitor clicks Play, full YouTube cookies get set. From that point on, the behavior is practically indistinguishable from a standard embed.<\/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\">One thing I want to knock down preemptively: this isn&#8217;t about Google illegally shipping data to the US. Google has been certified under the EU-US Data Privacy Framework since 2023, so that particular boogeyman doesn&#8217;t apply here. The real issue sits elsewhere \u2014 a YouTube embed isn&#8217;t necessary for the site to function, so under the ePrivacy Directive and GDPR it requires active, opt-in consent, EU-wide, not just in Czechia. Czechia, for instance, has <a href=\"https:\/\/www.sabatka.net\/en\/gdpr-cookie-bars-finaly-in-czechia\/\">required opt-in consent since a 2022 amendment to its telecoms law<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So: youtube-nocookie is a legitimate step. It limits personalization, and unlike a standard embed \u2014 which sets YouTube cookies the moment the page loads \u2014 it holds off until the visitor clicks Play. On its own, though, it doesn&#8217;t solve consent.<\/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\">The worst option: rewriting the domain with JavaScript after page load<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">While researching how people handle this in practice, I found guides \u2014 including one from an official cookie banner vendor \u2014 recommending an elegant-looking trick: let the page render a standard YouTube embed, then use JavaScript after load to rewrite the <code>src<\/code> attribute from <a href=\"http:\/\/youtube.com\" target=\"_blank\" rel=\"noopener\">youtube.com<\/a> to <a href=\"http:\/\/youtube-nocookie.com\" target=\"_blank\" rel=\"noopener\">youtube-nocookie.com<\/a>. It sounds clever. Technically, it doesn&#8217;t hold up.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The browser starts fetching the iframe&#8217;s content the moment it hits the <code>src<\/code> attribute in the HTML \u2014 which happens before your rewriting script even gets a chance to run. It turns into a race measured in milliseconds: the request to <a href=\"http:\/\/youtube.com\" target=\"_blank\" rel=\"noopener\">youtube.com<\/a> can go out before your script manages to fix it. How fast that happens depends on where in the page the script sits, how the page renders, and how much other code runs before it. As a privacy safeguard, this mechanism simply isn&#8217;t reliable.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On top of that, your site is still making a request to a third-party domain and handing over data there. This doesn&#8217;t solve anything for GDPR \u2014 it just fools people who don&#8217;t know better.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>This is exactly the kind of detail I run into regularly when auditing cookie banners and embedded content \u2014 and it&#8217;s not just YouTube. It applies to anything your site pulls in from elsewhere, the same way <a href=\"https:\/\/www.sabatka.net\/en\/who-reads-forms-on-your-website-and-do-you-know-about-it\/\">ad pixels automatically read the forms on your website<\/a>. If you&#8217;re not sure what your site is quietly sending out, that&#8217;s something <a href=\"https:\/\/www.sabatka.net\/en\/sluzby\/\">an audit can check<\/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>Lab note<\/strong><\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Until a visitor clicks the video thumbnail, the page exists in two states at once: &#8220;the video is here&#8221; and &#8220;the video isn&#8217;t here.&#8221; The click is what decides \u2014 a bit like <a href=\"https:\/\/en.wikipedia.org\/wiki\/Schr%C3%B6dinger%27s_cat\" target=\"_blank\" rel=\"noopener\">Schr\u00f6dinger&#8217;s cat<\/a>, except instead of a box you have an iframe, and instead of poison you have consent. Which happens to be exactly the principle behind the fix we&#8217;re getting to next.<\/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\">The real fix: two layers, not one<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Building something genuinely clean means doing two things: swap the embed&#8217;s domain on the server, and only load the video itself once the visitor actually asks for it. Let&#8217;s take them one at a time.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Layer 1 \u2014 swap the domain on the server, not in the browser<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you genuinely need the embed to load right away (typically because consent was already given earlier and the video should just play), rewrite the domain wherever the HTML actually gets built \u2014 on the server, in a template, or through a content filter in your CMS. On WordPress, that usually means hooking into a filter that modifies content at render time (<code>the_content<\/code>, for example), or editing the template that generates the embed \u2014 not a script running in the browser after the fact. On other systems, look for the equivalent spot: wherever the HTML gets assembled server-side, not wherever the browser just displays it. Do this, and the browser never gets the chance to contact <a href=\"http:\/\/youtube.com\" target=\"_blank\" rel=\"noopener\">youtube.com<\/a> at all \u2014 the HTML it receives already contains only <a href=\"http:\/\/youtube-nocookie.com\" target=\"_blank\" rel=\"noopener\">youtube-nocookie.com<\/a> from the start. No race against milliseconds, no hoping the script fires in time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re briefing a developer or an agency, this is the one sentence that matters: the domain gets swapped on the backend when the page is generated \u2014 never with JavaScript after it loads.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Layer 2 \u2014 load the video only after a click on the thumbnail (the facade pattern)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The facade pattern is a standard recommendation across the EU \u2014 the two-click solution has a long tradition, especially in Germany \u2014 and the principle is simple: instead of an iframe, the page shows a static thumbnail with a Play button. The real YouTube iframe (on the nocookie domain) only loads once the visitor clicks the thumbnail \u2014 exactly the moment from the Schr\u00f6dinger&#8217;s cat analogy where the video decides whether it &#8220;is&#8221; or &#8220;isn&#8217;t.&#8221;<\/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\">One more detail \u2014 even the thumbnail image itself, pulled from <code>img.youtube.com<\/code>, sends the visitor&#8217;s IP to Google, since the browser fetches it from Google&#8217;s servers. A fully clean setup hosts thumbnails locally instead \u2014 download them once when you publish the content and serve them from your own domain. Only a click on Play should trigger anything that talks to Google.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You don&#8217;t have to build this from scratch \u2014 ready-made implementations of the same principle already exist (the open-source lite-youtube-embed component, for instance, or WordPress plugins that implement the facade pattern). If you want to see the principle in actual code, here&#8217;s a minimal, dependency-free example \u2014 an HTML thumbnail, CSS for the Play button, and JavaScript that only builds the real iframe after a click:<\/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\">Three things in this code separate &#8220;looks clean&#8221; from &#8220;is clean&#8221;:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>No iframe or loading script ships in the page&#8217;s HTML<\/strong> \u2014 just a <code>div<\/code> with an image. The browser never touches YouTube&#8217;s servers until the <code>play()<\/code> function actually runs. The newly created iframe also gets its own CSS class (<code>yt-facade__iframe<\/code>), so it stays just as responsive as the thumbnail it replaces \u2014 not a fixed-size element locked to whatever dimensions the image happened to render at.<\/li>\n\n\n\n<li><strong><code>facade.replaceWith(iframe)<\/code> only ever runs from a click or a keyboard action<\/strong> \u2014 <code>click<\/code> and <code>keydown<\/code> (Enter or spacebar). The <code>autoplay=1<\/code> parameter in the URL then works without issue, because the browser treats it as a response to a user action rather than an automatic autoplay \u2014 the <code>iframe.allow<\/code> attribute with <code>autoplay<\/code> a few lines up helps with that too.<\/li>\n\n\n\n<li><strong><code>role=\"button\"<\/code> and <code>tabindex=\"0\"<\/code><\/strong> make the thumbnail operable for people navigating by keyboard or screen reader \u2014 without them, the facade would just be an unclickable image to them. The <code>noscript<\/code> fallback covers visitors with JavaScript disabled \u2014 they get a direct link to YouTube instead of a dead thumbnail.<\/li>\n<\/ol>\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\">And that locally hosted thumbnail mentioned above? Download it once \u2014 say, from <code>img.youtube.com\/vi\/YOUR_VIDEO_ID\/maxresdefault.jpg<\/code> at the moment you publish the content \u2014 and store it on your own server or CDN. One catch: <code>maxresdefault.jpg<\/code> only exists for some videos (typically not for older ones or anything outside a 16:9 ratio), so verify the file actually downloaded before you ship it. Use <code>hqdefault.jpg<\/code> as a safer default \u2014 it&#8217;s available for practically every video. No live request to Google when the page loads. The Play button itself isn&#8217;t a separate image either \u2014 <code>.yt-facade__play<\/code> is rendered purely in CSS, so you&#8217;re not maintaining a second set of assets for <code>hover<\/code> or <code>focus<\/code> states, just a color and a shadow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One more note: <code>videoId<\/code> goes straight into the iframe&#8217;s URL in this code. If it comes from a dedicated CMS field that only editors with permissions can touch, that&#8217;s fine as-is. If it could ever come from arbitrary user input, validate the format (11 characters, letters, numbers, hyphen, underscore) before it reaches the address.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;d rather not write this by hand, the lite-youtube-embed component mentioned earlier \u2014 or the matching WordPress plugin \u2014 does exactly this. Same principle, just implemented for you by an existing library.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s also worth adding one sentence next to the thumbnail about what happens after the click \u2014 something like &#8220;Clicking loads a video from YouTube, which may involve transferring data to Google.&#8221; That&#8217;s not legalese. It&#8217;s information for a human.<\/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\">Lessons from a real implementation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Reality is rarely as clean as this write-up makes it sound. On one client project, we ran into a site where product descriptions \u2014 videos included \u2014 were pulled in by JavaScript from a third-party service we had no access to integrate with. Rebuilding that entire feed for a fully clean setup with locally hosted thumbnails simply wasn&#8217;t realistic. What we could do was switch the domain to nocookie as a pragmatic improvement.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s not perfect. But it&#8217;s better than nothing, and more importantly, we knew exactly what risk was still left on the table for the client \u2014 and wrote that into the site&#8217;s terms. The world isn&#8217;t black and white. Even a partial fix has value, as long as you know what&#8217;s still left to solve after it.<\/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\">Say it in plain language, not legalese<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Whichever combination of the two layers you end up with, it belongs in your cookie banner and privacy policy \u2014 in one clear sentence, not a paragraph of legalese. Something like: &#8220;Videos from YouTube on this page only load after you consent. Clicking the thumbnail transfers data to Google, including your IP address.&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This part gets skipped a lot, because it&#8217;s not a metric anyone watches on a dashboard. I covered the same category of mistake in <a href=\"https:\/\/www.sabatka.net\/en\/5-most-common-bugs-in-cookie-bar-configuration\/\">5 most common cookie bar configuration bugs<\/a> \u2014 from what I see in audits, roughly a third of companies have their cookie banner set up wrong. An embedded YouTube video is just another spot where the same mistake repeats \u2014 nobody notices until someone actually looks closely.<\/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\">Summary<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">On its own, youtube-nocookie doesn&#8217;t get you GDPR compliance \u2014 it limits personalization of playback and ads, but it doesn&#8217;t block the IP transfer on page load or the identifiers written to the browser. Real youtube-nocookie GDPR compliance rests on two things: swap the domain on the backend, never with JavaScript after the page loads, and load the video only once someone clicks the thumbnail (the facade pattern).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re not sure your site even gets that first layer right, it&#8217;s worth a closer look together \u2014 audits usually turn up more than just YouTube. <a href=\"https:\/\/www.sabatka.net\/en\/kontakt\/\">Let&#8217;s schedule a consultation<\/a>.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<p>\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=\"https:\/\/www.sabatka.net\/en\/kontakt\/\">Contact me<\/a><\/div>\n\n\n\n<div class=\"wp-block-button linkedinShare\"><a class=\"wp-block-button__link wp-element-button\">Share on LinkedIN<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Embedding a YouTube video on your site? Then you&#8217;re dealing with GDPR, whether you&#8217;ve thought about it or not. And if you already &#8220;solved&#8221; this by switching the embed to the youtube-nocookie.com domain, here&#8217;s the uncomfortable part: that alone doesn&#8217;t get you full youtube-nocookie GDPR compliance. It&#8217;s a step in the right direction. It&#8217;s not [&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\/en\/wp-json\/wp\/v2\/posts\/1259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sabatka.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sabatka.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sabatka.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sabatka.net\/en\/wp-json\/wp\/v2\/comments?post=1259"}],"version-history":[{"count":35,"href":"https:\/\/www.sabatka.net\/en\/wp-json\/wp\/v2\/posts\/1259\/revisions"}],"predecessor-version":[{"id":1312,"href":"https:\/\/www.sabatka.net\/en\/wp-json\/wp\/v2\/posts\/1259\/revisions\/1312"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sabatka.net\/en\/wp-json\/wp\/v2\/media\/1311"}],"wp:attachment":[{"href":"https:\/\/www.sabatka.net\/en\/wp-json\/wp\/v2\/media?parent=1259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sabatka.net\/en\/wp-json\/wp\/v2\/categories?post=1259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sabatka.net\/en\/wp-json\/wp\/v2\/tags?post=1259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}