Automatic placeholders for YouTube

By default, when YouTube videos get blocked prior consent, they are simply not displayed if a visitor has not consented to marketing cookies. Thus visitors may not realize that anything is missing.

It is therefore advisable to create a placeholder, to notify the visitor of a missing video, to maintain the same look and feel of the page, and to give the customer the option to update their consent settings, so that they can view the blocked content.
Creating a placeholder is described in this guide.

Since this can be a bit of a nuisance, you can automate the process in such a way that adding a special attribute to the YouTube iframe tag will automatically generate a placeholder image of the video that inherits the size of the iframe. Furthermore a link will be placed under the image that informs the visitor that the content requires consent and provides a link to update their consent settings.

To do this, you need to add this script to the page (the exact positioning is not important):

<script>
  window.addEventListener("CookiebotOnDecline", () => {
    addRule = (r) => d.styleSheets[0].insertRule(r);
    size = (e) => e.toString().length - e.toString().length / 4;
    text = (t) => d.createTextNode(t);
    const d = document;
    d.querySelectorAll("iframe[data-add-placeholder]").forEach((e) => {
      const a = d.createElement("a"),
          div = d.createElement("div"),
          iframeSrc = e.src ? e.src : e.dataset.cookieblockSrc,
          img = d.createElement("img"),
          id = /\/embed\/(.+)$/.exec(iframeSrc)[1],
          p = d.createElement("p");
          e.classList.add("cookieconsent-optin-marketing");
      if (d.querySelectorAll("div.cookieconsent-optout-marketing").length > 0)
        return;
      a.textContent = "accept marketing cookies";
      a.href = "javascript:Cookiebot.renew()";
      if (e.height) img.height = e.height;
      if (e.width) img.width = e.width;
      img.classList.add("placeholder");
      img.src = `https://i.ytimg.com/vi/${id}/hqdefault.jpg`;
      addRule("img.placeholder{filter:grayscale(80%)blur(2px);}");
      div.classList.add("cookieconsent-optout-marketing");
      div.append(img, p);
      p.classList.add("centered");
      p.append(text("Please "), a, text(" to view this video."));
      p.style.cssText = `font-weight:700;left:${size(p)}em;position:relative;`;
      e.parentNode.insertBefore(div, e);
    });
  });
</script>

When the script is present, adding the data-add-placeholder attribute to the iframe will automatically generate the placeholder.

For example:

<iframe
  data-add-placeholder
  width="1280"
  height="688"
  src="https://www.youtube.com/embed/t1LJ6i1i9gA"
  title="Cookiebot WordPress Installation"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>