How Videos and Cookie Consent Work Together on Your Site

Osano and YouTube Videos

When someone visits a page that has a YouTube video on it, that video wants to set tracking cookies before it even plays. Privacy rules say we cannot let it do that until the visitor has agreed to marketing cookies. Osano enforces this by holding the video back until the visitor says yes. The one downside is that a held-back video leaves an empty white gap on the page, which can look broken. This guide explains how we replace that gap with a friendly message and a button, and what the whole thing looks like from the visitor’s side.

Why a video sometimes does not appear

A YouTube video is not just a picture sitting on the page. The moment it loads, it starts talking to Google and dropping cookies that are used for advertising and tracking. Because those count as marketing cookies, you should not load them for a visitor who has not agreed to marketing. So Osano steps in and keeps the video from loading until consent is given. In the standard setup, the visitor simply sees blank space in the place where the video would have been. 

What a visitor actually sees

When the below is configured, here is a view of what the user should see. 

1.  The visitor opens the page. Where the video would be, they see a short, friendly message instead of blank space, something like “This video is blocked until you enable Marketing cookies,” along with a button that says “Enable Marketing Cookies.”

2.  The visitor clicks the button. The Osano cookie preferences panel slides open. This is the same settings panel visitors can reach from the cookie banner on the site.

3.  In that panel, the visitor switches Marketing on and clicks save.

4.  The message disappears on its own, and the video appears in the same spot, ready to play.

5.  If the visitor later changes their mind and turns Marketing back off, the video is blocked again and the friendly message returns. Nothing is forced, and nothing is permanent.

Why the button opens settings instead of just playing the video

It might seem simpler to have the button instantly switch marketing cookies on and start the video. We deliberately do not do that, for two reasons.

(1.) Consent has to be a real choice the visitor makes, not something a button quietly does for them, and regulators care a great deal about that difference.

(2). Osano is built around that same principle and does not provide a way to silently turn a category on from a button. Sending the visitor to the settings panel, where they make the choice and save it themselves, is both the right approach and the one the tool is designed to support.

The button takes the visitor to the settings panel rather than playing the video in a single click. That is expected behavior, not a fault. You may also hear about a “no-cookie” version of YouTube. It helps a little, but it still stores information on the visitor’s device, so it does not remove the need for consent. The most risk averse setup is to keep treating these videos as marketing.

For your developer

Everything below is the actual implementation, using Osano’s consent tools. The video is tagged with data-osano set to MARKETING, and its web address is moved into data-src so Osano holds it until consent. The button opens Osano’s preferences panel, and two small listeners keep the placeholder message in step with the visitor’s marketing choice.

The video and its placeholder message (HTML)

<div id="yt-placeholder">
  <div id="yt-warning">
    <p>This video is blocked until you enable Marketing cookies.</p>
    <a href="#" id="yt-enable">Enable Marketing Cookies</a>
  </div>
  <iframe width="560" height="315"
    data-osano="MARKETING"
    data-src="https://www.youtube.com/embed/Ey1kFYVXH7w"
    title="YouTube video player" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

The script that ties it together (JavaScript)

<!-- Place this after the markup above, or wrap it in DOMContentLoaded.
     The osano.js script itself must still be the first script on the page. -->
<script>
  // The link opens Osano’s cookie preferences panel.
  document.getElementById("yt-enable").addEventListener("click", function (e) {
    e.preventDefault();
    window.Osano.cm.showDrawer();
  });
 
  // Show the message when Marketing is off, hide it when Marketing is on.
  function syncPlaceholder() {
    var granted = window.Osano.cm.marketing; // read-only true/false
    document.getElementById("yt-warning").style.display = granted ? "none" : "block";
  }
 
  // Set the starting state, then re-check each time consent is saved.
  window.Osano.cm.addEventListener("osano-cm-initialized", syncPlaceholder);
  window.Osano.cm.addEventListener("osano-cm-consent-saved", syncPlaceholder);
</script>

Notes for developers

Use the read-only Osano.cm.marketing property to check the consent state. It is safer than reading the raw consent object, which can be undefined before the visitor has made a choice.

Listen to osano-cm-consent-saved rather than the one-time osano-cm-marketing event, so the message reappears if the visitor withdraws marketing consent later.

If the site uses the United States “Do Not Sell” model, open Osano.cm.showDoNotSell() instead of showDrawer().

Osano.cm is available immediately after osano.js loads, so this script can sit later in the page as long as osano.js remains first.