Un sol iframe de YouTube pot contactar diversos dominis i carregar scripts, imatges i recursos del reproductor abans que algú vegi el vídeo. Si és contingut secundari, aquesta feina competeix amb la pàgina i complica el consentiment.
Una solució freqüent és mostrar una vista prèvia lleugera i crear el reproductor només després d’un clic deliberat. Ha de funcionar amb teclat, explicar la connexió externa i no dependre d’un truc visual fràgil.
Mesurar el cost dins la pàgina
Fes una prova freda amb l’iframe i identifica peticions a YouTube i dominis relacionats. Registra bytes, feina del fil principal i posició del vídeo.
En staging, retira temporalment el bloc i repeteix sota les mateixes condicions. La diferència demostra el cost millor que una afirmació general.
Comprova també duplicats: un bloc d’escriptori, un altre de mòbil, un modal ocult o un carrusel poden inicialitzar diversos reproductors.
Separar privacitat i rendiment
youtube-nocookie.com redueix certa activitat d’emmagatzematge prèvia, però un iframe carregat immediatament continua sent pesat. Tampoc substitueix la política de consentiment aplicable.
Decideix per separat domini de privacitat i càrrega després del clic. Verifica requisits amb qui gestioni privacitat; una opció tècnica no constitueix per si sola compliment legal.
Crear un botó de vista prèvia real
Renderitza inicialment imatge local, títol i botó:
<button
class="video-preview"
type="button"
data-video-id="dQw4w9WgXcQ"
aria-label="Reproduir: com funciona la reparació"
>
<img
src="/wp-content/uploads/repair-video-preview.webp"
width="1280"
height="720"
alt=""
>
<span aria-hidden="true">Reproduir vídeo</span>
</button>La imatge porta alt="" perquè l’etiqueta del botó ja aporta el nom accessible. Allotja la preview localment si sol·licitar la miniatura a YouTube abans del consentiment no és apropiat.
Crear l’iframe després de la interacció
Utilitza un únic listener controlat:
document.querySelectorAll(".video-preview").forEach((button) => {
button.addEventListener("click", () => {
const videoId = button.dataset.videoId;
const frame = document.createElement("iframe");
frame.src =
`https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1`;
frame.title = button.getAttribute("aria-label");
frame.allow = "accelerometer; autoplay; encrypted-media; picture-in-picture";
frame.allowFullscreen = true;
button.replaceWith(frame);
}, { once: true });
});No acceptis URL arbitràries des del contingut. Limita el valor a un ID vàlid, escapa la sortida del servidor i considera un bloc mantingut si diversos editors publiquen vídeos.
Valida també l’identificador abans d’interpolar-lo, per exemple permetent únicament lletres, números, guionet i guió baix amb la longitud esperada. L’atribut data-video-id no és una frontera de confiança: un editor, importació o script el pot modificar. La llista d’atributs allow s’ha de limitar a les funcions realment utilitzades pel reproductor.
Preservar proporció i accessibilitat
Dona al botó i a l’iframe la mateixa proporció, per exemple amb aspect-ratio: 16 / 9, perquè el contingut inferior no salti.
El control ha de ser un <button> veritable, activable amb Retorn i Espai, amb focus visible. Un <div> clicable sobre una icona sol fallar amb teclat i tecnologies d’assistència.
Moure el focus a l’iframe després de substituir-lo pot ajudar o desorientar; decideix mitjançant proves reals.
Integrar el consentiment
Si el mitjà extern requereix permís, explica que reproduir connecta amb YouTube. El clic potser ha d’obrir la categoria corresponent abans de crear l’iframe.
Coordina la preview amb la plataforma de consentiment. Un error comú passa quan l’script de preview espera clic i el de galetes espera un iframe que encara no existeix.
Verificar abans i després del clic
Abans d’interactuar no hi ha d’haver JavaScript del reproductor i la miniatura ha de tenir dimensions apropiades. Després s’ha de carregar el vídeo correcte, funcionar la pantalla completa i existir un sol iframe.
Prova teclat, orientació mòbil, galetes externes bloquejades i consentiment rebutjat. En pàgines amb diversos vídeos, activar-ne un no els ha d’inicialitzar tots.
Demana implementació gestionada si el constructor recrea iframes, el consentiment entra en conflicte o apareixen reproductors ocults. Aporta URL i comportament desitjat, sense contrasenya inicialment.
El resultat ha de reduir la feina prèvia al clic mantenint una elecció clara, accessibilitat i reproducció fiable; ocultar l’iframe amb CSS no basta.