Skip to content
Start for free

YouTube

Play YouTube videos for visitors who allow marketing, and keep YouTube off the page for everyone else. No iframe, no request.

Inth keeps the consent record of each choice, with the visitor’s country and the policy that applied.

Start for free
pnpm add c15t
YouTubeWaiting for consent
Before a choice

The page has no video iframe, and no request goes to YouTube.

Turn the switch on, then off, to see what loads.

Before you start

You need an Inth project that connects to your app and c15t in that app, with its consent provider in place. You also need the ID of an embeddable video.

c15t has no YouTube helper. This guide wraps the video iframe in the c15t ConsentGate component.

Open the Next.js quickstart

How consent works with YouTube

This guide uses marketing, because the YouTube player can set ad identifiers. Measurement also works if your policy says so.

Until that category has permission, ConsentGate renders no iframe. So the browser makes no request to YouTube.

On withdrawal, ConsentGate removes the iframe and its embedded document. Requests that went out before cannot come back.

The youtube-nocookie.com host does not replace the consent gate. Skip remote thumbnails and preconnects to YouTube before permission.

Installation

YouTube has one load mode in c15t. ConsentGate waits for permission for the category that you choose.

Wait for permission. The video iframe mounts only after the visitor accepts marketing. On withdrawal, ConsentGate removes it.

<ConsentGate category={embedCategory}>

An opt-out policy or no policy gives optional categories permission before a choice. Then the video shows on the first page. This guide uses an opt-in policy.

Setup steps

  1. Add the embed configuration

    Replace VIDEO_ID with your video. Set player options in the URL, for example start=36 to begin 36 seconds in.

    src/embed-config.ts
    export const embedCategory = 'marketing' as const;
export const embedURL =
	'https://www.youtube-nocookie.com/embed/VIDEO_ID?playsinline=1';
export const embedTitle = 'Product walkthrough';
export const embedAspectRatio = '16 / 9';

    Reserve a player area of at least 200 by 200 pixels.

  2. Wrap the iframe in ConsentGate

    Render this component inside your existing consent provider. It does not create a second provider, so keep your Inth endpoint, mode, policy, styles and consent UI.

    src/consent-embed.tsx
    'use client';

import { ConsentGate } from 'c15t/next';
import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-config';

export function ConsentEmbed() {
  return (
    <ConsentGate category={embedCategory}>
      <iframe
        src={embedURL}
        title={embedTitle}
        loading="lazy"
        allowFullScreen
        style={{ width: '100%', aspectRatio: embedAspectRatio, minHeight: 200, border: 0 }}
      />
    </ConsentGate>
  );
}

    ConsentGate keeps the iframe out of the page until the visitor gives permission, and removes it on withdrawal. The lazy attribute only delays an allowed iframe. It is no consent gate.

  1. Add the embed configuration

    Replace VIDEO_ID with your video. Set player options in the URL, for example start=36 to begin 36 seconds in.

    src/embed-config.ts
    export const embedCategory = 'marketing' as const;
export const embedURL =
	'https://www.youtube-nocookie.com/embed/VIDEO_ID?playsinline=1';
export const embedTitle = 'Product walkthrough';
export const embedAspectRatio = '16 / 9';

    Reserve a player area of at least 200 by 200 pixels.

  2. Wrap the iframe in ConsentGate

    Render this component inside your existing consent provider. It does not create a second provider, so keep your Inth endpoint, mode, policy, styles and consent UI.

    src/consent-embed.tsx
    import { ConsentGate } from 'c15t/react';
import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-config';

export function ConsentEmbed() {
  return (
    <ConsentGate category={embedCategory}>
      <iframe
        src={embedURL}
        title={embedTitle}
        loading="lazy"
        allowFullScreen
        style={{ width: '100%', aspectRatio: embedAspectRatio, minHeight: 200, border: 0 }}
      />
    </ConsentGate>
  );
}

    ConsentGate keeps the iframe out of the page until the visitor gives permission, and removes it on withdrawal. The lazy attribute only delays an allowed iframe. It is no consent gate.

All frameworks

React ConsentGate takes a placeholder node for the blocked state. Keep a clear way to reopen privacy settings there. This recipe does not load the IFrame Player API.

Verify your setup

Use a fresh opt-in session. Filter DevTools Network by youtube. Then test the three states.

  • Before a choice

    The page has no video iframe, and no request goes to YouTube.

  • After you allow marketing

    The iframe mounts, and the video plays.

  • After you withdraw marketing

    ConsentGate removes the iframe.

Test a narrow viewport and keyboard access to the placeholder and the player too.

Open the full YouTube guide