Automatic placeholders for Google Maps, Vimeo, and YouTube

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.
Note that you will have to make sure the iframes have the proper markup, either manually or by using our auto-blocker functionality, as the automatic placeholder will only replace already blocked iframes. 

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.

<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: