Iframe cookie consent with YouTube example – Cookiebot Support

Website content loaded in iframes from third party content providers, for example YouTube may set cookies and thereby require a visitor's consent.

To ensure no cookies are set before a website visitor has consented to their use, loading of the video must be postponed until the visitor has consented. To do this, the iframe must essentially be disabled prior consent.
This can be done by replacing the src attribute with data-src (or data-cookieblock-src if data-src is already being used by for example lazy loading).
To be able to enable the iframe when consent has been given, the data-cookieconsent attribute must be added with one of these values: 'preferences', 'statistics', or 'marketing'.
When consent is submitted, the Cookiebot script will determine if the conditions for loading the content of the iframe are met, and enables the iframe if this is the case.
On subsequent page requests where the visitor has already submitted a consent, the iframe content will automatically load in accordance with a visitor's consent state.
If you have auto blocking enabled, then the marking up of iframes should be handled automatically by the Cookiebot script.

To manually implement prior consent, edit the original iframe tag (for example):

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

to the following:

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

^*Remember to replace the example-URL 'https://www.youtube.com/embed/xxxxxxxxxxx' with the URL that points to the content you want to display.

Please note that YouTube offers you to serve videos from the alternative domain www.youtube-nocookie.com which doesn't use HTTP cookies. However, the alternative domain still stores information on a visitor's device, by using the browser's HTML Locale Storage instead, which also requires consent.

Display a placeholder when the required consent hasn't been given

You can choose to display a placeholder before or after the iframe-tag to show a message to the visitor and inform them that the content is blocked due to their consent settings (visitor has not consented to the types of cookies used by the iframe). Regardless of whether the YouTube iframe is marked up manually or automatically, using a placeholder is a good way to preserve the layout of the page. Furthermore, it offers a second chance at being allowed to set cookies.

For example:

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

This placeholder will only be displayed if the visitor hasn't consented, and will automatically be hidden if the users choses to update their consent settings to include cookies in the required category.

For more information about placeholders: Hide and show content based on the visitor's consent

Display a placeholder when the required consent hasn't been given

Related articles