How to Embed YouTube Videos Without Cookies

Learn how to embed the YouTube video player without allowing it to drop cookies on users’ devices.

Published Categorized as Web & Code

To embed a YouTube video player that doesn’t deploy cookies on the user’s browser when in use, take the regular embed code:

<iframe src="https://www.youtube.com/embed/BGULeEvQIsI"></iframe>

And replace “youtube.com” with “youtube-nocookie.com” in the src attribute of the <iframe> element while preserving the rest of the URL:

<iframe src="https://www.youtube-nocookie.com/embed/BGULeEvQIsI"></iframe>

That’s all you’ve got to do.

This will turn on the privacy-enhanced mode of the embedded YouTube player, which will stop YouTube from deploying a cookie on your website. As a result, the video won’t be recorded in the user’s viewing history and the ads on it won’t be personalized. And you will also be compliant with the GDPR.

For Website Administrators

If your server has the frame-src Content Security Policy (CSP), which controls which sources can be embedded within <iframe> elements, you will want to edit that policy and add “https://www.youtube-nocookie.com/” to the list of permitted sources. Otherwise, the embedded YouTube play will be blocked and won’t work.

Specifically, you need the following CSP header:

Content-Security-Policy: frame-src https://www.youtube-nocookie.com/

To permit the loading of the following <iframe> element:

<iframe src="https://www.youtube-nocookie.com/embed/BGULeEvQIsI"></iframe>

For Tagging Professionals

Embedding YouTube videos in privacy-enhanced mode prevents the YouTube trigger in Google Tag Manager from working. In other words, you will not be able to track any interactions with an embedded YouTube player if its <iframe> is embedded with the domain name “youtube-nocookie.com” instead of “youtube.com.”

For Web Developers

If your website or web application has a cookie banner or consent management platform, you may need to support two scenarios on your frontend:

  1. The user has given consent and the regular embedded YouTube player can be loaded.
  2. The user hasn’t given consent, or they revoke their consent, and the YouTube player must be embedded with the “youtube-nocookie.com” domain in the <iframe> element’s src attribute.

Depending on how your frontend is built, there are ways to handle that. For example, you could:

  • Serve a player-like thumbnail image and load the embedded YouTube player on click. As part of the function to load the player, determine the user’s preferences and load either a regular or a privacy-enhanced player.
  • Load all YouTube videos in privacy-enhanced mode. If the user gives cookie consent, execute a JavaScript function that loops through all <iframe> elements with “youtube-nocookie.com” in their src attribute and replaces it with “youtube.com”.
  • Load all YouTube videos in regular mode. When the DOM has finished loading or the user changes their preferences, determine their preferences and loop through all <iframe> elements to rewrite the src attribute to “youtube-nocookie.com” (or vice versa).

In Summary

Data protection regulations give data subjects greater rights over their personal data, but they often make it inexplicably hard to do very basic things like embedding a YouTube player on a website.

By Dim Nikov

Editor of Maker's Aid. Part programmer, part marketer. Making things on the web and helping others do the same since the 2000s. Yes, I had Friendster and Myspace.

Leave a comment

Your email address will not be published. Required fields are marked *