基于JavaScript实现符合GDPR的嵌入式YouTube视频Cookie授权问询

最近在折腾GDPR合规下的YouTube视频嵌入问题，踩了好几个坑，跟你唠唠我的解决方案和思路：

• 核心合规卡点：按照GDPR要求，网站嵌入YouTube视频必须像Google Analytics那样，先拿到用户的明确授权才行。我一开始以为用www.youtube-nocookie.com域名嵌入就能绕开Cookie问题，结果发现这个域名会在浏览器的HTML Local Storage里设置持久化的“超级Cookie”，照样得走授权流程。

• 实现逻辑（参考合规案例）：我之前看到过合规的实现案例，核心就是先给用户看视频占位符（比如封面图+授权提示），等用户点击同意后，再动态加载YouTube的iframe，具体步骤如下：

  1. 页面初始化时，只渲染视频的封面图（可以用YouTube官方的封面地址，格式是https://img.youtube.com/vi/[你的视频ID]/maxresdefault.jpg），再加个醒目的按钮或者提示框，明确告诉用户：点击后会加载YouTube的资源，可能会存储相关数据。
  2. 监听用户的同意点击事件，用户确认后，动态创建YouTube的iframe（推荐用www.youtube-nocookie.com的地址，能减少不必要的Cookie），替换掉之前的占位符。
  3. 把用户的授权状态存在自己网站的Local Storage里（记得遵循GDPR的最小必要原则），下次用户访问时，如果已经授权过，就直接加载视频，不用再问一遍。

• 简化版代码示例：
  下面是我整理的简化代码，你可以根据自己网站的样式调整细节：

  <!-- 初始占位符 -->
  <div class="youtube-placeholder" data-video-id="你的视频ID">
    <img src="https://img.youtube.com/vi/你的视频ID/maxresdefault.jpg" alt="视频封面">
    <button class="play-btn">同意授权并播放视频</button>
  </div>
  
  <script>
    // 检查用户是否已授权
    const hasConsent = localStorage.getItem('youtube_consent') === 'true';
    const placeholder = document.querySelector('.youtube-placeholder');
    const videoId = placeholder.dataset.videoId;
  
    if (hasConsent) {
      loadYoutubeVideo();
    } else {
      placeholder.querySelector('.play-btn').addEventListener('click', () => {
        // 存储授权状态
        localStorage.setItem('youtube_consent', 'true');
        loadYoutubeVideo();
      });
    }
  
    function loadYoutubeVideo() {
      // 创建iframe元素
      const iframe = document.createElement('iframe');
      iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1`;
      iframe.width = '100%';
      iframe.height = '480';
      iframe.frameBorder = '0';
      iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
      iframe.allowFullscreen = true;
      // 替换占位符
      placeholder.replaceWith(iframe);
    }
  </script>
  

• 额外注意事项：

  • 授权提示一定要清晰直白，不能含糊，最好能简要说明授权后YouTube会收集哪些数据（可以参考YouTube隐私政策提炼关键点）。
  • 要给用户留撤回授权的入口，比如在网站的Cookie设置页面里，允许用户取消YouTube视频的授权，这时候要移除已加载的iframe，同时清除本地存储的授权状态。
  • 如果你的网站已经在用Cookie合规管理工具，直接把YouTube视频的授权整合到现有流程里就行，比如用户选择允许非必要Cookie时，自动加载视频。

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