> For the complete documentation index, see [llms.txt](https://doc.dastra.eu/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.dastra.eu/en/features/cookies/integration/blocking/iframes.md).

# Blocking iframes (twitter/youtube...)

Many websites use iframes to display videos, tweets, etc. It is therefore necessary to ask users for their consent before loading the content of the iframe.

## Examples of services using iframes

* Video players: YouTube, Vimeo, Dailymotion, etc.
* Social media: Twitter, Facebook, etc.
* Podcast players.
* Audio players.

## Method 1: Using the SDK

The SDK blocks the iframes of the page that match a selector and displays a customizable blocking message instead:

<figure><img src="https://2697025545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvBxs22wUMicv9uWp6C-1972196547%2Fuploads%2Fgit-blob-3c6c5e36ca6c9feff81e2550f5f621aa05778515%2Fcookies-video-consent-overlay.png?alt=media" alt="A blocking message displayed in place of a YouTube video, with the I accept button"><figcaption><p>The blocking message in place of the video</p></figcaption></figure>

A click on the button of the message automatically records consent to the service and loads the iframe. If the visitor later withdraws consent to this service, the iframe is blocked again. The message offers an acceptance button only.

An example with YouTube video player iframes:

```html
<iframe width="560" height="315" src="https://www.youtube.com/embed/aJ1qDx8lv2Y" allowfullscreen></iframe>
<script>
  // Set up youtube iframe blocking
  dastra.push(['iframeBlock', {
    selector: 'iframe[src*="youtube.com"]',
    service: 'youtube', // service slug (check your banner configuration)
    body: '<p>By clicking on "I accept" the trackers will be deposited and you will be able to view the video. You can withdraw your consent at any time :</p>',
    buttonLabel: 'I accept',
    buttonClass: 'btn btn-primary',
    footer: '<p>Consents provided by <a href="https://www.dastra.eu">Dastra</a></p>'
  }])
</script>
```

The `iframeBlock` options are:

| Option        | Purpose                                                             |
| ------------- | ------------------------------------------------------------------- |
| `selector`    | CSS selector of the iframes to block.                               |
| `service`     | Identifier (slug) of the service whose consent unblocks the iframe. |
| `body`        | HTML text of the blocking message.                                  |
| `buttonLabel` | Label of the acceptance button.                                     |
| `buttonClass` | CSS classes of the button.                                          |
| `footer`      | HTML text displayed under the button.                               |

{% hint style="info" %}
You can customize the look of the message (background, fonts, etc.) with your CSS stylesheet. The blocking message is added to the page with the `.datra-blocking-iframe` class.
{% endhint %}

## Method 2: Manual implementation

You can also implement your own logic:

```html
<script>
  // Select all youtube iframes
  var iframes = document.querySelectorAll('iframe[src*="youtube.com"]');

  // For each iframe, disable it by moving the "src" attribute to "data-blocked-src"
  iframes.forEach(function (iframe) {
    var iframeSrc = iframe.getAttribute('src');
    iframe.setAttribute('data-blocked-src', iframeSrc);
    iframe.setAttribute('src', 'about:blank');
    var divAlert = document.createElement('div');
    divAlert.classList.add('alert-iframe-cookie');
    divAlert.innerHTML = '<p>By clicking on "I accept" the trackers will be deposited and you will be able to view the video. You can withdraw your consent at any time.</p><div class="button-container"><button type="button" onclick="SetConsent(\'youtube\', true)" class="btn btn-success">I accept</button></div><p>Consents provided by <a href="https://www.dastra.eu">Dastra</a></p>';
    iframe.after(divAlert);
  });

  // On consent, load the iframes and hide the message
  window.addEventListener('dastra:consent:youtube', function () {
    document.querySelectorAll('iframe[data-blocked-src*="youtube.com"]').forEach(function (iframe) {
      iframe.setAttribute('src', iframe.getAttribute('data-blocked-src'));
      iframe.removeAttribute('data-blocked-src');
    });

    document.querySelectorAll('.alert-iframe-cookie').forEach(function (alert) {
      alert.style.display = 'none';
    });
  });

  function SetConsent(service, consent) {
    dastra.cookieConsent.consent.setServiceConsent(service, consent);
    dastra.cookieConsent.consent.save();
  }
</script>
<style>
  .alert-iframe-cookie {
    background-color: #ccc;
    padding: 20px;
    color: #333;
    text-align: center;
  }

  .button-container {
    margin: 10px auto;
  }
</style>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://doc.dastra.eu/en/features/cookies/integration/blocking/iframes.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.