Openli
IntroductionGetting StartedTechnical DocumentationGet help
  • Getting started
    • Introduction
    • Dictionary
    • FAQ
      • IAB TCF v2.0
  • Privacy hub
    • How to create your privacy profile
    • How can I get an Openli Privacy Badge?
    • Vendor owners
    • Why are custom properties on vendors super valuable?
    • Setting up custom properties
  • Tasks
  • Cookie Consent Management
    • Quickstart
    • Checklist: Cookies
    • Cookie widget
      • Create a cookie policy
      • Create a cookie widget
      • Install the widget
      • Manually add any cookies
      • Customise your widget
      • How to get color codes
      • Set the widget language
      • Use custom link/button instead of Cookie Shield
      • Add company name to cookie pop-up
    • Categorise your cookies
    • Adding information to cookies
    • Adding information to your cookie providers
    • Blocking Cookies with Openli
    • Cookie expiration dates and lifespan
      • Changing expiration on Google Analytics cookies
  • Policy and agreement management
    • Generate your privacy policy
    • Changing an old cookie policy to a new on autopilot
    • Embed your policies and legal agreements
      • Embedding agreements without displaying a widget
    • Install the Privacy Badge
  • General Openli guides
    • Setting up SSO (Single Sign-On)
      • SSO with Azure AD (Microsoft)
      • SSO with Google
      • SSO with Okta
      • How to log in with SSO
    • Add a website to your Openli account
    • Using projects to handle multiple languages
    • Collect consents without storing IP addresses or user-agents
  • Technical documentation
    • Widget
      • Collect cookie consent
        • Blocking cookies
        • Blocking embedded media
        • Cookie-widget options
        • Consent state API
    • API
      • Services
        • Personal data
        • Subprocessors
    • Cookies set by Openli
  • System Specific Integration Guides
    • Cloudflare
  • Legacy integrations
    • Google Consent Mode
    • Google Tag Manager
      • Block cookies with GTM
      • Install Openli with GTM
      • Prevent triggers from firing in GTM
    • HubSpot
    • Pardot
    • Shopify
      • Install cookie widget
      • Integrate consent with checkout
    • Square Online
    • Squarespace
    • Webflow
    • Wix
Powered by GitBook
On this page
  1. Technical documentation
  2. Widget
  3. Collect cookie consent

Blocking embedded media

If your site embeds external media, such as a YouTube video, you might need to prevent the media from loading until consent has been given for any cookies the media sets.

As with all external resources that your site includes, you should check with the service that provides it to determine what, if any, cookie consent is required to present it to your users.

Example: Blocking an embedded YouTube video

Assume that you have embed code like this from YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Y7dpJ0oseIA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

You can make its activation conditional on consent to a particular category, in this example the marketing category, by using the following pattern, and replacing the embed code where indicated:

<script type="text/plain" data-cookieconsent="marketing">
    (function(embedCode) {
        document
            .currentScript
            .nextElementSibling
            .closest(".legalmonster-embed-container")
            .innerHTML = embedCode;
    })(
        // Replace the code between the single quotes
        // with your embed code, keeping it on one line.
        '<iframe width="560" height="315" src="https://www.youtube.com/embed/Y7dpJ0oseIA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
    );
</script>
<div class="legalmonster-embed-container">
    <!-- The embedded media will be inserted in this div. -->
</div>

More advanced integration is possible using this pattern as a foundation, for example including a still image from an embedded video, or adding a placeholder message.

In the future, we hope to introduce a more automated and streamlined way to control embedded third-party content.

PreviousBlocking cookiesNextCookie-widget options

Last updated 4 years ago