Video incrustado con clic para cargar

Lo que hace un video incrustado normal antes de que alguien lo vea

El fragmento que copias del menú Compartir de un video es un <iframe>, una ventanita hacia otro sitio web colocada dentro de tu página. El navegador rellena esa ventana en cuanto dibuja la página. Con un solo video de YouTube, son unas veinte solicitudes y varios cientos de kilobytes de scripts, descargados de servidores de Google para cada visitante, incluidos todos los que pasan de largo con el scroll.

Cada una de esas solicitudes lleva la dirección IP del visitante y la dirección de tu página. El reproductor también puede leer y escribir en su propio almacenamiento del navegador. Así tu página se vuelve más lenta y tus visitantes quedan registrados por una empresa que nunca eligieron contactar.

Los dos tipos de código que escribe esta herramienta

Clic para cargar

Tu página recibe un enlace disfrazado de marco de video, con una imagen de portada, un triángulo de reproducción y una etiqueta accesible. Un script corto, incluido una sola vez, espera un clic en ese enlace y solo entonces pone el reproductor real con autoplay=1, así que en la mayoría de los dispositivos basta una pulsación. Si el script falta o está bloqueado, el enlace sigue funcionando y abre el video en la plataforma en una pestaña nueva.

Iframe simple en el dominio de privacidad mejorada

Ningún script. El reproductor se carga con la página, pero desde youtube-nocookie.com, o desde Vimeo con dnt=1, y con loading="lazy" para que un video situado al final de la página espere a que el visitante se acerque.

En ambos casos, el reproductor va dentro de una caja dimensionada con la propiedad CSS aspect-ratio, así que se adapta a la columna donde lo pongas. Un enlace /shorts/ se detecta y recibe una caja 9:16 limitada a 360 píxeles de ancho.

La imagen de portada es la última fuga

En YouTube, el código con clic para cargar apunta por defecto a la miniatura del video en i.ytimg.com. Ese servidor pertenece a Google. No instala ninguna cookie, pero sí ve la dirección IP del visitante cuando se carga la imagen. Para llegar a cero solicitudes de terceros, guarda un fotograma del video, súbelo a tu propio sitio y pega su dirección en el campo de portada. Que sea una dirección https://, porque los navegadores rechazan las imágenes inseguras en páginas seguras.

Vimeo no tiene una dirección de miniatura predecible, así que por defecto se muestra un fotograma oscuro con tu título. El mismo campo de portada lo reemplaza por una imagen.

Pegar el código en tu sitio

El resultado es HTML simple con estilos en línea, así que no depende de tu tema.

• WordPress: añade un bloque “HTML personalizado” y pega. Los administradores pueden guardar la parte <script>, pero en una red multisitio las cuentas con el rol de Editor pueden perderla al guardar. Si pasa, la portada sigue enlazando al video, o puedes cambiar al iframe simple.
• Squarespace, Wix, Webflow, Shopify: usa el bloque de código o de inserción, no el bloque de video integrado, que traería de vuelta el reproductor estándar.
• HTML estático: pega donde va el video. Con varios videos en una página, pega cada fragmento completo. El script comprueba si ya se ejecutó.
• Content-Security-Policy: permite www.youtube-nocookie.com o player.vimeo.com en frame-src. Una política que prohíba los scripts en línea bloqueará el script del clic para cargar, así que muévelo a un archivo que sirvas tú.

Rellena siempre el campo del título. Pasa a ser el title del iframe y la etiqueta del enlace de reproducción, y es lo que anuncia un lector de pantalla. Si lo dejas vacío, lo único que oirá la persona es “YouTube video”.