<div class="flex">
  <button onClick="javascript:window.Metomic('reset');alert('Consent cleared from LocalStorage! Press the rerun button ↘')">
    Revoke consent
  </button>
  
  <!-- 
    I've made no code changes here.
    Metomic is doing it for me!
  -->
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>
  <div class="flex example">
    <div class="fb-share-button" data-href="youtube.com" data-layout="button_count"></div>
  </div>

  <!-- 
    I've made no code changes here.
    Metomic is doing it for me!
  -->
  <div class="flex example">
    <iframe width="356px" height="200px" src="https://www.youtube.com/embed/_tW91mIg9j4?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
  </div>

  <div class="flex example">
    <!-- I'm manually blocking this script by changing its type -->
    <script 
      src="https://platform.twitter.com/widgets.js"
      type="text/x-metomic"
      data-micropolicy="mtm_twitter"
      data-placeholder="@metomic/generic" 
      data-placeholder-params="
        title = This is a custom placeholder
        text = View the network tab in dev tools
        buttonText = Enable Twitter">
    </script>
  </div>
</div>
.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.example {
  margin: 8px 0;
  width: 100%;
}

button {
  padding: 8px;
  font-size: 14px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.