JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.5.min.js" type="text/javascript"></script>

<!--
data-src instead of src so content does not automatically load
data-cc-category to associate this content with Cookie Control category name
-->
<iframe
  data-cc-category="youtube"
  data-src="https://www.youtube.com/embed/7cjVj1ZyzyE"

  width="1440"
  height="762" 
  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
></iframe>

CSS

/* can be ignored, used simply to highlight iframe */
iframe {
  border: 4px solid black;
}
/* no consent */
iframe:not([src]){
  border-color: red;
}
iframe[src]{
  border-color: green;
}

JavaScript

var config = {
    apiKey: '592b99ebdf88c091dad9b556b6d8de236ac97687',
    product: 'PRO_MULTISITE',
    optionalCookies: [
        {
            name : 'youtube',
            label: 'YouTube Videos',
            description: "YouTube may use the views of embedded YouTube content to influencing the viewer's browsing experience on YouTube. This means that the view of a video will be used to personalise the YouTube browsing experience, both on our site and in the viewer's subsequent YouTube viewing experiences.",
            cookies: ['PREF', 'VISITOR_INFO1_LIVE', 'use_hitbox', 'YSC'],
            onAccept : function(){
              // Embedded YouTube Content will be available on acceptance
            },
            onRevoke: function(){
              // If accepted and then revoked,
              // embedded YouTube Content will not be available on subsequent visits
            }
        }
    ],
    
};

CookieControl.load( config );