YouTube, Google Maps y otros contenidos incrustados: cómo cargarlos tras el consentimiento

Los vídeos de YouTube, los mapas de Google Maps y las publicaciones de redes sociales incrustados cargan código de terceros en cuanto se renderiza la página, y ese código puede instalar cookies y enviar datos del visitante al proveedor. Para incrustarlos de forma lícita en la UE y el Reino Unido, muestra primero un marcador de posición local y carga el contenido incrustado real solo después de que el visitante dé su consentimiento o haga clic para cargarlo. El modo de privacidad mejorada de YouTube ayuda, pero no sustituye al consentimiento.

¿Por qué los contenidos incrustados necesitan consentimiento?

Un contenido incrustado es una ventana al sitio web de otra persona. Cuando el navegador renderiza un iframe de youtube.com o google.com, solicita la página, los scripts y las imágenes del proveedor, envía la dirección IP y los datos del navegador del visitante, y permite al proveedor leer y escribir sus propias cookies y su propio almacenamiento. Nada de esto espera a tu banner.

Por eso los contenidos incrustados están sujetos a las mismas normas de consentimiento que los scripts de seguimiento. Almacenar o leer información en el dispositivo del visitante con fines que no sean estrictamente necesarios requiere consentimiento, sea cual sea la tecnología que lo haga; consulta ¿el consentimiento de cookies cubre localStorage, los píxeles y el fingerprinting? para ver hasta dónde llega esa norma.

También eres responsable de la decisión de incrustar. En Fashion ID (C-40/17), el TJUE declaró que un sitio web que había incrustado el botón “Me gusta” de Facebook era corresponsable del tratamiento, junto con Facebook, de la recogida de los datos del visitante y de su transmisión a Facebook. La misma lógica se aplica a otros contenidos incrustados que envían datos a su proveedor.

¿Basta con youtube-nocookie.com?

No. El modo de privacidad mejorada de YouTube, que se activa cambiando el dominio del contenido incrustado a www.youtube-nocookie.com, hace que las reproducciones del vídeo incrustado no se usen para personalizar la experiencia de YouTube del espectador ni los anuncios que ve en otros sitios. Es una mejora real.

No impide que el reproductor se cargue desde los servidores de Google ni que use el almacenamiento del navegador, y los datos del visitante siguen llegando a Google cuando se carga el iframe. Usa el modo de privacidad mejorada como la URL que cargas después del consentimiento, no como un motivo para cargar el reproductor sin él.

¿Qué carga cada contenido incrustado habitual?

Todos los grandes proveedores de contenidos incrustados cargan su propio código y pueden definir sus propios identificadores. Esta tabla muestra las alternativas habituales que no requieren consentimiento.

Contenido incrustado	Qué se carga antes de la interacción	Alternativa sin consentimiento
Vídeo de YouTube	Página del reproductor, scripts, miniaturas, cookies o almacenamiento de Google	Miniatura alojada en tu servidor con un botón de carga al hacer clic
Vídeo de Vimeo	Página del reproductor, scripts, analítica	Miniatura alojada en tu servidor, o la opción do-not-track del reproductor de Vimeo tras comprobar qué cubre
Google Maps	Teselas del mapa, scripts, cookies de Google	Imagen estática del mapa y un enlace para abrir las indicaciones
Publicaciones de redes sociales (X, Instagram, Facebook)	Script del proveedor que reescribe la publicación	El HTML estático alternativo que te da el proveedor
Widgets de chat y de reservas	Script del proveedor, a menudo con seguimiento de sesión	Un botón que abre el widget cuando se solicita

¿Cómo creo un marcador de posición de carga al hacer clic?

Renderiza un marcador de posición que se parezca al contenido incrustado, explique lo que va a ocurrir y contenga un botón real. Guarda la URL del contenido incrustado en un atributo data para que el navegador no la solicite.

<div class="embed" data-consent="marketing"
     data-embed-src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1"
     data-embed-title="Vídeo de demostración del producto">
  <img src="/images/demo-thumbnail.jpg" alt="" width="560" height="315">
  <p>Este vídeo está alojado en YouTube. Al reproducirlo se carga contenido de Google,
     que puede instalar cookies. <a href="/cookie-policy">Más información</a></p>
  <button type="button" class="embed-load">Reproducir vídeo</button>
  <label><input type="checkbox" class="embed-remember"> Permitir siempre los vídeos de YouTube</label>
</div>

Después, sustituye el marcador de posición por el iframe al hacer clic, o todos los marcadores de una categoría cuando el visitante dé su consentimiento a través de tu 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(); // mantener a los usuarios de teclado donde estaban
}

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); // tu capa de consentimiento; carga el resto
  }
  loadEmbed(placeholder);
});

// Llamar desde los controladores de tu banner cuando se conceda una categoría
function activateEmbeds(category) {
  document.querySelectorAll(`.embed[data-consent="${category}"]`).forEach(loadEmbed);
}

Algunos detalles marcan la diferencia entre un marcador de posición que funciona y uno que molesta:

• Aloja tú la imagen de vista previa. Enlazar directamente la miniatura de YouTube envía una solicitud a Google antes de que se tome ninguna decisión.
• Reserva el espacio. Da al marcador de posición las mismas dimensiones que al iframe para evitar saltos de diseño al sustituirlo.
• Indica quién es el proveedor. Un aviso concreto (“alojado en YouTube”) es lo que convierte el clic en una decisión informada.
• Registra las elecciones duraderas. Si el visitante marca “permitir siempre”, guárdalo a través de tu capa de consentimiento y regístralo, como cualquier elección del banner.

Para el patrón general de retención de scripts, consulta cómo bloquear scripts de terceros hasta obtener el consentimiento.

¿Cómo gestiono las publicaciones de redes sociales y los mapas?

La mayoría de los contenidos incrustados de redes sociales ya incluyen una alternativa estática. Una publicación de X incrustada, por ejemplo, es un blockquote con el texto de la publicación, que el script del widget del proveedor convierte después en una tarjeta enriquecida. Conserva el blockquote y carga el script del widget solo después del consentimiento:

<blockquote class="twitter-tweet">
  <p>Texto, autor y fecha de la publicación, tal como los proporciona el código de inserción.</p>
  <a href="https://x.com/example/status/1234567890">Ver la publicación</a>
</blockquote>

<!-- Inerte hasta que se conceda la categoría de marketing -->
<script type="text/plain" data-consent="marketing"
        src="https://platform.twitter.com/widgets.js"></script>

Para los mapas, una imagen estática de la ubicación y un enlace “Abrir en Google Maps” cubren la mayoría de las necesidades sin cargar nada de Google. Si necesitas un mapa interactivo, usa el mismo marcador de posición de carga al hacer clic que para los vídeos.

¿La carga al hacer clic mejora el rendimiento?

Sí. Los reproductores de vídeo y los widgets de mapas están entre los elementos más pesados de muchas páginas, a menudo con cientos de kilobytes de JavaScript. Cargarlos solo cuando alguien lo pide elimina ese coste para cada visitante que pasa de largo, lo que mejora métricas como Largest Contentful Paint e Interaction to Next Paint. Consulta los banners de cookies y las Core Web Vitals para saber más sobre cómo mantener rápidas las herramientas de consentimiento.

En resumen

Cada contenido incrustado es una solicitud a terceros y, normalmente, también almacenamiento de terceros, así que trátalo como cualquier otro rastreador: no se carga nada antes del consentimiento. Sustituye los contenidos incrustados por marcadores de posición accesibles y alojados en tu servidor, carga el contenido real cuando el visitante haga clic o dé su consentimiento, y conserva las alternativas estáticas para las publicaciones de redes sociales y los mapas. Herramientas como Cookiesh pueden retener iframes, como los de vídeos y mapas, hasta obtener el consentimiento, y su escáner enumera los proveedores de contenidos incrustados junto con el resto de tus solicitudes a terceros, para que veas qué páginas necesitan marcadores de posición.

Este artículo ofrece información general y no constituye asesoramiento jurídico. Para tomar decisiones sobre tu situación concreta, consulta a un profesional cualificado en privacidad.