Custom Common HTML

To add a YouTube video placeholder before enabling a specific category

By default, blocking a YouTube video introduces a large white space that remains unfilled until the category associated with the YouTube cookies has been enabled. The OneTrust.UpdateConsent() method allows us to quickly enable and update the consent of a certain category.

You can use the following code to add a placeholder that allows users to enable a specific cookie category to view the video on the site.

<div id="placeholder">
    <div id="warning">
        <img src="https://emojipedia-us.s3.amazonaws.com/source/skype/289/warning_26a0-fe0f.png" alt="warning">
        <p>Content not working due to Targeting Category not being enabled.</p>
        <a href ="#" onclick="enableTargeting();">Enable Targeting Cookies</a>
        
    </div>
    <script type = "text/plain" class = "optanon-category-C0004">
        document.getElementById("warning").style.display = "none";
    </script>
    <iframe width="560" height="315" class = "optanon-category-C0004" 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 code above performs the following:

1. It creates a main <div> (division section) with an id named placeholder. The ID here is mainly used for styling purposes.
2. It creates a second <div> section with an id named warning. The ID here is important as outside of styling, we use it later on to introduce a method to make the placeholder disappear when the category associated with the Youtube cookies gets enabled.
3. It creates an <a> (anchor tag) which calls the enableTargeting() function when called. The enableTargeting() function updates the consent of the targeting category. This can be done in a separate script:

<script>
    function enableTargeting() {
        OneTrust.UpdateConsent("Category","C0004:1");
    }
</script>

4. A new <script> is then created which calls the second div and makes it disappear. That is done by calling the id of the div and forcing it to display none, from a styling standpoint. We use the manual JavaScript rewrite method making the script work only when the targeting category has been enabled. Essentially, when the targeting category has been enabled, the placeholder we have in place disappears programmatically, while when the targeting category is disabled, the placeholder is present.
5. Finally, the iFrame has been rewritten to make it possible to run once the targeting category has been enabled.

📘

Styling is used to make the placeholder fit the position and size of the iFrame embed.