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.