Embed Blocking

Learn how Cookient blocks third-party embeds like YouTube, Google Maps, and social media widgets until consent is given.

Overview

Third-party embeds (iframes) often set cookies and track users before they interact with the content. Under GDPR, this tracking requires consent. Cookient blocks these embeds and shows a placeholder until the user consents.

What Gets Blocked

  • •Video embeds – YouTube, Vimeo, Dailymotion
  • •Maps – Google Maps, OpenStreetMap embeds
  • •Social media – Twitter/X, Facebook, Instagram, LinkedIn
  • •Other services – Spotify, SoundCloud, Calendly, etc.
i
Why Block Embeds?
Even if a user doesn't play a YouTube video, the embed itself loads tracking scripts and sets cookies. This happens the moment the iframe loads, before any user interaction.

How It Works

Cookient uses a MutationObserver to detect iframes as they're added to the page and blocks them before they can load.

  1. 1

    Detection

    MutationObserver watches for new <iframe> elements added to the DOM.

  2. 2

    URL Matching

    The iframe's src is checked against known third-party domains.

  3. 3

    Blocking

    The iframe's src is moved to data-cookient-src and replaced with an empty source.

  4. 4

    Placeholder

    A visual placeholder is inserted, informing the user why the content is blocked.

  5. 5

    Restoration

    When consent is granted, the original src is restored and the embed loads normally.

Simplified Code Example

// Blocking an iframe
iframe.setAttribute('data-cookient-src', iframe.src);
iframe.src = 'about:blank';
insertPlaceholder(iframe);

// Restoring after consent
iframe.src = iframe.getAttribute('data-cookient-src');
removePlaceholder(iframe);

Supported Embeds

Cookient automatically detects and blocks the following embed types based on their domain. Each is assigned to a consent category.

ServiceDomainsCategory
YouTubeyoutube.com, youtube-nocookie.comMarketing
Vimeovimeo.com, player.vimeo.comMarketing
Google Mapsgoogle.com/maps, maps.google.comPersonalization
Twitter/Xtwitter.com, platform.twitter.comMarketing
Facebookfacebook.com, fb.comMarketing
Instagraminstagram.comMarketing
LinkedInlinkedin.comMarketing
Spotifyspotify.com, open.spotify.comPersonalization
SoundCloudsoundcloud.comPersonalization
*
Custom Embeds
Additional embed sources can be configured in the Script Blocking section of your dashboard. Add the domain and assign it to a category.

Placeholder UI

When an embed is blocked, a placeholder is shown in its place. This informs users why the content isn't visible and provides a way to accept cookies.

►

Content Blocked

This content is provided by YouTube. To view it, you need to accept Marketing cookies.

Example placeholder (non-functional demo)

Placeholder Elements

  • •Icon – Visual indicator of the content type (video, map, etc.)
  • •Title – "Content Blocked" or service-specific title
  • •Description – Explains which category needs consent
  • •Accept button – Accepts the required category and loads content
  • •Preferences button – Opens the full preferences modal

Customization

The placeholder UI automatically inherits your banner's styling. You can also customize specific aspects.

Inherited Styles

  • ✓Background color from your banner
  • ✓Text color from your banner
  • ✓Button styles (primary and secondary)
  • ✓Font family
  • ✓Border radius

Placeholder Text

Placeholder text is automatically translated based on your banner's language settings. Custom messages can be configured in the Banner Editor.

Available Languages

EnglishGermanFrenchSpanishDutchItalianFinnishSwedishNorwegianDanish

Troubleshooting

Embed loads before consent

Cause: Iframe is present in the initial HTML before Cookient initializes.

Solution: Move the Cookient script higher in your <head>, ideally as the first script. Alternatively, use lazy-loaded iframes that are added after page load.

Placeholder not showing

Cause: The embed domain might not be in the blocklist.

Solution: Add the domain to your Script Blocking settings in the dashboard. Run a new scan to detect the embed.

Embed not loading after consent

Cause: The embed might require a different consent category than expected.

Solution:

  1. Check which category the embed is assigned to in your dashboard
  2. Verify that category was accepted by checking window.cookient.getConsent()
  3. If needed, reassign the embed to the correct category

Placeholder looks broken

Cause: CSS conflicts with your website's styles.

Solution:

  1. Check DevTools for CSS override issues
  2. Placeholder uses .cookient-placeholder class – avoid styling this in your CSS
  3. Contact support if the issue persists

YouTube-nocookie still blocked

This is expected. While youtube-nocookie.com doesn't set cookies before playback, it still loads Google scripts that can track users. For full GDPR compliance, it should still be blocked until consent.

← Privacy SignalsFAQ →