# YouTube

The c15t ConsentGate component renders a YouTube iframe only while marketing has permission in Inth, and removes it on withdrawal.

## Key facts

- **Tool:** YouTube
- **Category:** Other
- **Consent categories:** Marketing
- **Setup method:** Script gate
- **Package:** c15t

## Links

- [Documentation](https://c15t.com/docs/integrations/youtube)
- [YouTube](https://www.youtube.com/)

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](/dashboard/sign-up)

## 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](https://c15t.com/docs/frameworks/next/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.

```ts
<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

### Next.js

#### 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.

```
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.

#### 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.

```
'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.

### React

#### 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.

```
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.

#### 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.

```
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.

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](https://c15t.com/docs/integrations/youtube)

## Related guides

- [Zendesk Messaging](/integrations/zendesk)

- [Ada](/integrations/ada)

- [Crisp](/integrations/crisp)