Embeds

Pick a method

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 from c15t/vue/vue-plugin:

<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 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:

<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 and Google Maps guides cover sizing and titles.