Show YouTube videos only after visitors accept functionality cookies

Put each YouTube player behind a placeholder, and let a script tagged with functionality load the player once the visitor accepts. TermsFeed Free Cookie Consent handles only <script> elements, so it never blocks an <iframe> by itself. A YouTube iframe pasted into the page loads at once and sends the IP address to YouTube before the visitor makes any choice.

The placeholder keeps the player address in a data-cc-src attribute instead of src, so the browser requests nothing. Visitors who decline see a short text, a link to the video on youtube.com, and a button that opens the Preferences Center.

The tagged script runs whenever Cookie Consent releases the functionality category. It runs on every page load of a visitor who accepted that category. It runs on the same page, with no reload, after a click on the "I agree" button. It runs too when a visitor saves the Preferences Center with the switch of the "Functionality cookies" tab set to Active.

Cookie Consent reads tagged scripts once, when run() starts, so the script belongs in the HTML the server sends. The script replaces only the placeholders already on the page when it runs, so the placeholders belong in that HTML too. The YouTube placeholder uses the class names and attributes of the general pattern, so one functionality script serves every placeholder of that category on the page. Read every step of that pattern, including the placeholder styles, in Block Embeds and Iframes Until Consent.

The button inside each placeholder carries the class open-cookie-preferences. Add .open-cookie-preferences to the open_preferences_center_selector list already in your run() call, so a click on a placeholder button opens the Preferences Center. With no such option yet, add this one beside the options the TermsFeed generator wrote, so the list keeps the default #open_preferences_center link.

"open_preferences_center_selector": "#open_preferences_center, .open-cookie-preferences",

Put the YouTube player behind a placeholder

Replace the YouTube iframe with a div that holds the player address in data-cc-src. Take the video ID from the embed code YouTube gives under Share, then Embed, and write the address with www.youtube-nocookie.com.

Paste this placeholder where the video goes. Change VIDEO_ID, the title, and the text to match the video.

<div class="cc-embed"
     data-cc-category="functionality"
     data-cc-src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
     data-cc-title="Product tour video"
     data-cc-width="560"
     data-cc-height="315"
     data-cc-allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
  <p>This video plays from YouTube, which receives your IP address. Accept functionality cookies to watch it here, or <a href="https://www.youtube.com/watch?v=VIDEO_ID">watch it on YouTube</a>.</p>
  <button type="button" class="open-cookie-preferences">Change my cookie preferences</button>
</div>

Paste this script once per page, anywhere in the page markup.

<script type="text/plain" data-cookie-consent="functionality">
  (function () {
    var placeholders = document.querySelectorAll('.cc-embed[data-cc-category="functionality"]');
    for (var i = 0; i < placeholders.length; i++) {
      var placeholder = placeholders[i];
      var iframe = document.createElement('iframe');
      iframe.src = placeholder.getAttribute('data-cc-src');
      iframe.title = placeholder.getAttribute('data-cc-title') || '';
      iframe.width = placeholder.getAttribute('data-cc-width') || '560';
      iframe.height = placeholder.getAttribute('data-cc-height') || '315';
      iframe.setAttribute('allow', placeholder.getAttribute('data-cc-allow') || '');
      iframe.setAttribute('allowfullscreen', '');
      iframe.setAttribute('loading', 'lazy');
      iframe.setAttribute('frameborder', '0');
      placeholder.parentNode.replaceChild(iframe, placeholder);
    }
  })();
</script>

The link to youtube.com in the placeholder sends nothing to YouTube until the visitor clicks it.

Privacy-enhanced mode reduces what YouTube does with an embedded view, but it does not stop the request that sends the IP address to YouTube. Use it inside the placeholder, never instead of it.

YouTube privacy-enhanced mode serves the player from www.youtube-nocookie.com. YouTube says this mode keeps embedded views from changing what the viewer sees on YouTube and from personalizing ads elsewhere, according to the YouTube Help article on privacy-enhanced mode. The article says nothing about cookies.

The checks assume express consent with page_load_consent_levels left out or at the generator value ["strictly-necessary"], and the "I decline" button shown. Publish the change and clear any page cache before the check. Run the check in Chrome. It takes about 3 minutes per page.

  1. Close every private window, open a new one, open DevTools, and select the Network tab.
  2. Type youtube in the Network filter box and open the page with the video.
  3. Scroll to the placeholder, and confirm that no request appears while the consent banner shows, and that the placeholder text shows in place of the player.
  4. Click the "I agree" button and scroll to the video. Confirm that requests to www.youtube-nocookie.com appear and the player shows, with no page reload.
  5. Close every private window, open a new one, open DevTools on the Network tab filtered on youtube, load the page, and click the "I decline" button.
  6. Scroll to the placeholder, and confirm that the Network tab does not show a request and that the placeholder text stays.

Run the check on every page template that carries a video.

Common mistakes with YouTube embeds

Check each template that carries a video for each mistake that loads the player outside the placeholder or keeps it from loading at all.

  • An iframe left in the page. Requests to youtube hosts appear before you answer. A page builder video block, a YouTube URL pasted on its own line in WordPress, or a theme hero video writes a plain iframe that loads at once. Replace it with the placeholder markup, and check the Network tab on each template.
  • The address kept in src on the placeholder. A placeholder div with src in place of data-cc-src does not give the script an address, so after you accept, the iframe does not show a video. Search the page source for class="cc-embed" and check each match for a plain src= attribute. Keep the address in data-cc-src only.
  • A placeholder added after the page loads. A placeholder that a script adds later stays after the visitor accepts. Put the placeholders in the HTML the server sends, and handle content a route adds later with Single-Page Apps and Frameworks.
  • The category missing from notice_banner_purposes_levels. Cookie Consent never releases an optional category left out of that option, so no visitor sees the video. With "debug": true, the Console shows JavaScript script of the category "functionality" never runs. Keep functionality in the option on every page that carries a video.
  • Autoplay for returning visitors. Chrome blocks autoplay with sound until the visitor interacts with your site, according to the Chrome autoplay policy. On desktop, a visitor who has played media with sound on your site before is the exception. For a visitor who accepted earlier, the player loads with the page and no click, so a player set to autoplay usually stays paused. Look for autoplay in the data-cc-src address of each placeholder. Leave autoplay out of the address unless the video is muted.
  • The video keeps playing after a withdrawal. A tagged script that already ran keeps running, so Cookie Consent holds the player again only from the next page load, and it does not delete cookies set by YouTube. To see the player keep playing, reopen the Preferences Center with the #open_preferences_center link, select the "Functionality cookies" tab, set its switch to Inactive, and click the "Save my preferences" button. The player keeps playing on the current page. Reload the page after a change of choice with Reload the Page After Consent.