懒加载YouTube缩略图时阻止Cookie，实现无Cookie横幅GDPR合规方案

Let's break down why your current code is still setting cookies and how to fix it to be fully compliant without needing a consent banner (since you don't have the infrastructure to handle consent storage/opt-out):

Why Your Current Code Isn't Compliant #

Even with the youtube-nocookie.com domain, two key issues are triggering unwanted cookies that violate GDPR:

• Pre-click thumbnail requests: Loading sddefault.jpg directly from YouTube's servers sends a request to their domain, which can set cookies (especially if the user has visited YouTube before).
• Unconsented iframe load: When a user clicks the thumbnail, the embedded iframe will still set YouTube's standard tracking cookies (like VISITOR_INFO1_LIVE) on the nocookie domain. Since you're loading this content without explicit user approval, it breaks GDPR's "prior consent" rule for third-party data processing.

Step-by-Step Fix for Your Code #

To fix this, we need to eliminate all pre-consent third-party communication and only load YouTube content when the user takes a deliberate, informed action. Here's how to adjust your implementation:

1. Host Thumbnails Locally #

Instead of pulling thumbnails from YouTube's servers, download the sddefault.jpg for each video and upload it to your own website. This removes any pre-click interaction with YouTube entirely.

2. Update the HTML Structure #

Replace your existing .youtube elements with a structure that includes a local thumbnail, a clear consent prompt, and hides YouTube embed logic until user approval:

<div class="youtube" data-embed="YOUR_VIDEO_ID">
  <img src="/path/to/your-local-thumbnail.jpg" alt="Video thumbnail" class="youtube-thumbnail">
  <div class="youtube-consent-overlay">
    <p>Click to load this YouTube video<br>(Third-party content will be loaded, which may set cookies)</p>
    <button class="youtube-load-btn">Load Video</button>
  </div>
</div>

3. Adjust the JavaScript Logic #

Modify your script to only load the iframe after the user clicks the consent button, and remove all pre-load requests to YouTube:

// GDPR-compliant YouTube lazy load
(function() {
  const youtubeContainers = document.querySelectorAll(".youtube");

  youtubeContainers.forEach(container => {
    const loadBtn = container.querySelector(".youtube-load-btn");
    const videoId = container.dataset.embed;

    loadBtn.addEventListener("click", function() {
      // Remove consent overlay and thumbnail
      container.innerHTML = "";

      // Create and embed the YouTube iframe
      const iframe = document.createElement("iframe");
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("allowfullscreen", "");
      // Keep using the nocookie domain for reduced tracking
      iframe.setAttribute("src", `https://www.youtube-nocookie.com/embed/${videoId}?rel=0&iv_load_policy=3&autoplay=1`);
      
      container.appendChild(iframe);
    });
  });
})();

4. Add Basic CSS for the Consent Overlay #

Style the overlay to make it clear that user action is required, and ensure transparency about what will happen:

.youtube {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.youtube-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.youtube-consent-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  gap: 1rem;
}

.youtube-load-btn {
  padding: 0.8rem 1.5rem;
  background: #ff0000;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s;
}

.youtube-load-btn:hover {
  background: #cc0000;
}

Why This Works for GDPR #

• No pre-consent third-party requests: All resources (thumbnail, CSS, JS) are hosted on your server until the user explicitly chooses to load the video.
• Explicit, informed consent: The user takes a deliberate action (clicking the button) to load YouTube's content, which counts as valid consent under GDPR.
• Transparency: The overlay clearly informs the user about the implications of loading the video, so they're making an informed choice.

内容的提问来源于stack exchange，提问作者Krystian