YouTube, Google Maps and other embeds: how to load them after consent

Embedded YouTube videos, Google Maps and social posts load third-party code the moment the page renders, and that code can set cookies and send visitor data to the provider. To embed them lawfully in the EU and UK, show a local placeholder first and load the real embed only after the visitor consents or clicks to load it. YouTube’s privacy-enhanced mode helps, but it is not a substitute for consent.

Why do embeds need consent?

An embed is a window into someone else’s website. When the browser renders an iframe from youtube.com or google.com, it requests the provider’s page, scripts and images, sends the visitor’s IP address and browser details, and lets the provider read and write its own cookies and storage. None of this waits for your banner.

That makes embeds subject to the same consent rules as tracking scripts. Storing or reading information on the visitor’s device for purposes other than strictly necessary ones needs consent, whatever technology does it; see does cookie consent cover localStorage, pixels and fingerprinting? for how far that rule reaches.

You are also responsible for choosing to embed. In Fashion ID (C-40/17), the CJEU held that a website that embedded Facebook’s Like button was a joint controller with Facebook for collecting the visitor’s data and transmitting it to Facebook. The same logic applies to other embeds that send data to their provider.

Is youtube-nocookie.com enough?

No. YouTube’s privacy-enhanced mode, enabled by changing the embed domain to www.youtube-nocookie.com, means views of the embedded video are not used to personalize the viewer’s YouTube experience or the ads they see elsewhere. That is a real improvement.

It does not stop the player from loading from Google’s servers or from using browser storage, and the visitor’s data still reaches Google when the iframe loads. Use privacy-enhanced mode as the URL you load after consent, not as a reason to load the player without it.

What does each common embed load?

Every major embed provider loads its own code and can set its own identifiers. This table shows the usual consent-free alternatives.

Embed	What loads before interaction	Consent-free alternative
YouTube video	Player page, scripts, thumbnails, Google cookies or storage	Self-hosted thumbnail with a click-to-load button
Vimeo video	Player page, scripts, analytics	Self-hosted thumbnail, or Vimeo’s do-not-track player option after checking what it covers
Google Maps	Map tiles, scripts, Google cookies	Static map image and a link to open directions
Social posts (X, Instagram, Facebook)	Provider script that rewrites the post	The static HTML fallback the provider gives you
Chat and booking widgets	Provider script, often with session tracking	A button that opens the widget on request

How do I build a click-to-load placeholder?

Render a placeholder that looks like the embed, explains what will happen and contains a real button. Keep the embed URL in a data attribute so the browser does not request it.

<div class="embed" data-consent="marketing"
     data-embed-src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1"
     data-embed-title="Product demo video">
  <img src="/images/demo-thumbnail.jpg" alt="" width="560" height="315">
  <p>This video is hosted by YouTube. Playing it loads content from Google,
     which may set cookies. <a href="/cookie-policy">Learn more</a></p>
  <button type="button" class="embed-load">Play video</button>
  <label><input type="checkbox" class="embed-remember"> Always allow YouTube videos</label>
</div>

Then swap the placeholder for the iframe on click, or for every placeholder in a category once the visitor consents through your banner:

function loadEmbed(placeholder) {
  const frame = document.createElement('iframe');
  frame.src = placeholder.dataset.embedSrc;
  frame.title = placeholder.dataset.embedTitle;
  frame.width = '560';
  frame.height = '315';
  frame.allow = 'autoplay; encrypted-media; picture-in-picture';
  frame.allowFullscreen = true;
  placeholder.replaceWith(frame);
  frame.focus(); // keep keyboard users where they were
}

document.addEventListener('click', (event) => {
  const button = event.target.closest('.embed-load');
  if (!button) return;
  const placeholder = button.closest('.embed');
  if (placeholder.querySelector('.embed-remember')?.checked) {
    grantConsent(placeholder.dataset.consent); // your consent layer; loads the rest
  }
  loadEmbed(placeholder);
});

// Call from your banner's handlers when a category is granted
function activateEmbeds(category) {
  document.querySelectorAll(`.embed[data-consent="${category}"]`).forEach(loadEmbed);
}

A few details make the difference between a placeholder that works and one that annoys people:

• Self-host the preview image. Hotlinking YouTube’s thumbnail sends a request to Google before any choice is made.
• Reserve the space. Give the placeholder the same dimensions as the iframe to avoid layout shift when it swaps.
• Say who the provider is. A specific notice (“hosted by YouTube”) is what makes the click an informed choice.
• Record durable choices. If the visitor ticks “always allow”, store it through your consent layer and log it, like any banner choice.

For the general pattern of holding back scripts, see how to block third-party scripts until consent.

How do I handle social posts and maps?

Most social embeds already ship a static fallback. An embedded post on X, for example, is a blockquote with the post text, which the provider’s widget script later turns into a rich card. Keep the blockquote and load the widget script only after consent:

<blockquote class="twitter-tweet">
  <p>Post text, author and date, as provided by the embed code.</p>
  <a href="https://x.com/example/status/1234567890">View the post</a>
</blockquote>

<!-- Inert until the marketing category is granted -->
<script type="text/plain" data-consent="marketing"
        src="https://platform.twitter.com/widgets.js"></script>

For maps, a static image of the location plus an “Open in Google Maps” link covers most needs without loading anything from Google. If you need an interactive map, use the same click-to-load placeholder as for video.

Does click-to-load help performance?

Yes. Video players and map widgets are among the heaviest things on many pages, often hundreds of kilobytes of JavaScript. Loading them only when someone asks cuts that cost for every visitor who scrolls past, which helps metrics such as Largest Contentful Paint and Interaction to Next Paint. See cookie banners and Core Web Vitals for more on keeping consent tooling fast.

Bottom line

Every embed is a third-party request and usually third-party storage, so treat it like any other tracker: nothing loads before consent. Replace embeds with accessible, self-hosted placeholders, load the real thing when the visitor clicks or consents, and keep static fallbacks for social posts and maps. Tools like Cookiesh can hold back iframes such as videos and maps until consent, and its scanner lists embed providers alongside your other third-party requests, so you can see which pages need placeholders.

This article is general information, not legal advice. For decisions about your specific situation, consult a qualified privacy professional.