---
title: Embeds
description: Keep YouTube videos, maps and other iframes out of a Vue page until
  their consent category is allowed, with ConsentGate or the iframe blocker.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## Pick a method

|Method|Use it when|
|--|--|
|`ConsentGate`|You render the iframe in a Vue component and want a placeholder with a way to open preferences.|
|The iframe blocker|The iframe comes from markup you do not render with a component, such as CMS content, or you want no wrapper.|

Both remove the iframe's `src` until the category is allowed, so the embed's
host receives no request before consent.

## Gate an embed with ConsentGate

Wrap the iframe in [`ConsentGate`](/docs/frameworks/vue/components/consent-gate)
from `c15t/vue/vue-plugin`:

```vue title="src/VideoEmbed.vue"
<script setup lang="ts">
import { ConsentDialogLink, ConsentGate } from 'c15t/vue/vue-plugin';
</script>

<template>
	<ConsentGate category="measurement">
		<iframe
			src="https://www.youtube-nocookie.com/embed/czTksCF6X8Y"
			title="YouTube video"
			loading="lazy"
			allowfullscreen
		/>
		<template #placeholder>
			<p>Allow measurement to load this YouTube video.</p>
			<ConsentDialogLink>Choose video permissions</ConsentDialogLink>
		</template>
	</ConsentGate>
</template>
```

The iframe does not exist in the page until the visitor allows measurement.
The `placeholder` slot shows a message and a
[`ConsentDialogLink`](/docs/frameworks/vue/components/consent-dialog-link)
until then. When the visitor withdraws measurement, Vue removes the iframe.

Pick the category that matches what the embed does. The example uses
measurement for YouTube because its player measures views. A map or chat
widget usually belongs under functionality or experience.

## Gate an iframe with the iframe blocker

The Vue plugin runs the iframe blocker by default. Give an iframe `data-src`
instead of `src`, and a `data-category`:

```vue title="src/MapEmbed.vue"
<template>
	<iframe
		data-src="https://www.google.com/maps/embed?pb=YOUR_EMBED_ID"
		data-category="functionality"
		title="Store map"
	/>
</template>
```

c15t sets `src` from `data-src` when the category is allowed and removes it
when the category is withdrawn. It watches the page, so iframes added later,
for example by a route change, are handled too. The iframe element stays in
the page while blocked, empty. Add `data-vendor` with a vendor ID to also
block the iframe while the visitor has turned that vendor off.

Pass `iframeBlocker: false` to the plugin to turn the blocker off.

## Verify

Open the page in a private window with the Network tab open, under a policy
that asks for consent. No request goes to `youtube-nocookie.com` or
`google.com/maps`. Allow the category and save: the iframe loads. Withdraw it
and save: the page reloads without the embed. The
[YouTube](/docs/integrations/youtube) and
[Google Maps](/docs/integrations/google-maps) guides cover sizing and titles.