Nous sommes dans le cas d'une iframe de type YouTube présent sur votre site et pour laquelle vous avez besoin du consentement de l'utilisateur avant de la lancer.

L'objectif ici est de conditionner le déclenchement de l'iframe à l'acceptation de l'utilisateur.

Il convient de suivre les étapes suivante :

1. Intégrer un code dédié dans le header de votre site
2. Modifier l'appel de l'iframe
3. Valider le bon fonctionnement de l'appel de l'iframe

1. Intégrer un code dédié dans le header de votre site

Voici le code à intégrer : 

(_axcb = window._axcb || []).push(function(sdk) {
  sdk.on('cookies:complete', function(choices){
    document
      .querySelectorAll('[data-hide-on-vendor-consent]')
        .forEach(el => {
          const vendor = el.getAttribute('data-hide-on-vendor-consent');
          el.style.display = choices[vendor] ? 'none' : 'inherit';
        });
      document
        .querySelectorAll('[data-requires-vendor-consent]')
        .forEach(el => {
          const vendor = el.getAttribute('data-requires-vendor-consent');
          if (choices[vendor]) {
            el.setAttribute('src', el.getAttribute('data-src'));
          }
        });
    });
  })

2. Modifier l'appel de l'iframe

Une iframe se charge généralement grâce à l'attribut src de sa balise d'appel dans laquelle on trouve l'URL permettant de récupérer le contenu cible que l'on souhaite afficher (ici une vidéo YouTube).

Notre objectif ici est de bloquer l'appel de ce contenu cible afin de solliciter le consentement de l'utilisateur.

Nous allons donc renommer l'attribut src en data-src ce qui a pour effet de ne pas charger le contenu de l'iframe et d'obtenir à la place un carré blanc :

<iframe
  width=""
  height=""
  data-requires-vendor-consent="youtube"
  data-src="https://www.youtube.com/watch?v=70Xg0cclf5Q">
</iframe>

✅  L'attribut data-requires-vendor-consent revoie le nom du cookie qui doit être accepté pour déclencher l'affichage de notre iframe .

Maintenant, il ne reste plus qu'à implémenter un call to action dans le carré présent sur votre site afin de permettre à l'utilisateur de donner son consentement.

Dans ce call to action nous appelons une fonction présente dans le SDK d'Axeptio :

<div data-hide-on-vendor-consent="Youtube">
  <button onclick="window.axeptioSDK.requestConsent('Youtube')">
   Accept Youtube cookie
  </button>
</div>

3. Valider le bon fonctionnement de l'appel de l'iframe

L'écran Axeptio va alors ouvrir la catégorie de cookies liée au cookie concerné afin que l'utilisateur puisse accepter le déclenchement du cookie qui conditionne le lancement de la vidéo.

Le widget sera donc ouvert au bon endroit et le cookie nécessaire sera bien en surbrillance.

L'utilisateur n'a donc plus qu'à accepter pour voir la vidéo s'exécuter.

✅  L'évènement cookies:complete est alors envoyé ; le code intégré dans le header du site va regarder et détecter l'attribut et il changera automatiquement le data-src en src 

✅  Pour aller plus loin, nous vous invitons à consulter l'article Optimisation du consentement