Iframe cookie consent

Last Updated On
< All Topics

Please note: This article was originally drafted to help implement Cookiebot prior to the release of the automated cookie control functionality on September 10th 2019.
You may still be using and preferring the manual implementation and markup option. In that case this article may still be relevant for you.


For automatic cookie blocking make sure that your cookie consent banner script includes the data attribute data-blockingmode=”auto” and that “async” is removed from the script example below.

Website content loaded in iframes from third party content providers like YouTube may set cookies and thereby require the visitor’s prior consent.

To hold back cookies until the website visitor has consented, Cookiebot will postpone loading the video until the visitor has consented. On subsequent page requests where the visitor has already submitted a consent, the iframe content will automatically load in accordance with the individual visitors consent state.

To implement prior consent, change the original iframe tag (example):

<iframe src="https://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>

to the following (rename ‘src’ to ‘data-src’ and apply the data-cookieconsent-attribute to the tag):

<iframe data-src="https://www.youtube.com/embed/xxxxxxxxxxx" data-cookieconsent="marketing" frameborder="0" allowfullscreen></iframe>

Replace the example-URL ‘https://www.youtube.com/embed/xxxxxxxxxxx’ with the URL of your own iframe-src.

Please note that YouTube offers you to serve videos from the alternative domain www.youtube-nocookie.com which is not setting http cookies. Instead the alternative domain is setting persistent “super cookies” in the browser’s HTML Locale Storage which also require consent. 

Display a message or image if not consented.

You can add a placeholder before or after the iframe-tag to show a message to the visitor, when the visitor has not consented to the types of cookies used by the iframe, e.g.:

<div class="cookieconsent-optout-marketing">
Please <a href="javascript:CookieConsent.renew()">accept marketing-cookies </a> to watch this video.
</div>

Cookiebot will hide the message when the visitor has consented.

To show an image, like we do on our website:

<div class="cookieconsent-optin-marketing">
<iframe  data-cookieconsent="marketing" data-src="https://www.youtube.com/embed/zCpMqFZPUPU"></iframe>
</div> 

<div class="cookieconsent-optout-marketing">
<img src="https://www.cookieinfo.net/wp-content/uploads/2019/07/Cookiemanager-thumbnail.jpg" alt="Accept cookies" />
</div>

If consent hasn’t been given yet the following image will be displayed: