Automatic placeholders for Google Maps, Vimeo, and YouTube – Cookiebot Support

When iframes, such as YouTube, or Vimeo videos or Google Maps get blocked prior consent when a visitor has not yet consented to marketing cookies, they are not displayed. As a result, visitors may not realize that anything is missing. The layout of the page may also be negatively impacted.

It is therefore advisable to create a placeholder to notify the visitor of the missing content, to maintain the same look and feel of the page, and most importantly; To give the customer the option to update their consent settings, so that they can view the blocked content.

Manually creating a placeholder is described in this guide. However, since this can be a bit of a nuisance, you can also automate the process in such a way that adding a special attribute to a Google Maps, Vimeo, or YouTube iframe tag will automatically generate a placeholder for it which inherits the size of the blocked content. A link will be placed under the placeholder which informs the visitor what content is blocked and that they need to update their consent settings in order to engage with the blocked content.

To do this, you need to add the following script to the page.

Please note: For this to work properly, you need to ensure that this script loads after the iframes it is meant to create placeholders for. For best results we recommend to add the script to the very bottom of the page.

<script type="text/javascript>
((d,i,m)=>{ct=t=>d.createTextNode(t);ce=e=>d.createElement(e);d.querySelectorAll(i)
.forEach(e=>{const a=ce('a'),div=ce('div'),p=ce('p'),s=e.dataset.cookieblockSrc,sp=
/google\.com\/maps\/embed/.test(s)?'Google Maps':/player\.vimeo\.com\/video\//
.test(s)?'Vimeo':/youtube\.com\/embed\//.test(s)?'YouTube':undefined;if(!sp)return; 
div.innerHTML=`<div style="background-color:#CCC;display:inline-block;height:${
e.height}px;position:relative;width:${e.width}px;">`+'<div style="background-color'
+':#848484;border-radius:15px;height:50%;position:absolute;transform:translate(50%'
+',50%);width:50%;"><p style="color:#FFF;font-size:7.5em;position:relative;top:50%'
+';left:50%;margin:0;text-align:center;transform:translate(-50%,-50%);">&ctdot;</p'
+'></div>';div.classList.add(`cookieconsent-optout-${m}`);a.textContent=`accept ${
m} cookies`;a.href='javascript:Cookiebot.renew()';p.append(ct('Please '), a, ct(
` to view this ${sp} content.`));div.append(p);e.parentNode.insertBefore(div, e);})
})(document, 'iframe[data-add-placeholder]', 'marketing')</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>

The normal content will then be replaced by a placeholder similar to this:

⋯

Please accept marketing cookies to view this YouTube content.

The placeholder is purposefully rather bland and neutral looking to ensure that it is very obvious that this replaces more interesting content. This may incentivize your visitors to update their consent settings to engage with your content.

Please note: Since Google Maps does not set cookies, it will not be automatically be blocked prior consent.
To block Google Maps you will manually need to mark-up the iframe as described in this guide.