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:
- The user has given consent and the regular embedded YouTube player can be loaded.
- 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’ssrc
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 theirsrc
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.