Skip to content

How to avoid flickering

Francesco Mugnai edited this page Apr 1, 2022 · 1 revision

If you lock the scripts in auto mode, you will notice that they are only visible for a few milliseconds. Almost a flicker. Frankly, it's a bit annoying.

I've a solution to fix this. Let's say you want to block Youtube and Spotify with the autoMode.
The original scripts are:

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

and...

<iframe
  src="https://open.spotify.com/embed/album/1234567890"
  width="300"
  height="380"
  frameborder="0"
  allowtransparency="true"
  allow="encrypted-media"
></iframe>

You can block them as I told you before:

autoMode: true,
autoCategories: {
    "youtube.com": ['Youtube videos', 'marketing'], // example
    "spotify.com": ['Spotify widget', 'thirdparty'], // example
},

Then add the following code right after the opening body tag of the page:

<div
  data-jgc-remove-style="youtube.com"
  data-jgc-placeholder-tag="https://www.youtube.com/embed/-9Iv3MmkvaY"
  data-jgc-tag="marketing"
>
  <style>
    iframe[src*="youtube.com"] {
      display: none;
    }
  </style>
</div>
<div
  data-jgc-remove-style="spotify.com"
  data-jgc-placeholder-tag="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
  data-jgc-tag="thirdparty"
>
  <style>
    iframe[src*="spotify.com"] {
      display: none;
    }
  </style>
</div>

See what I'm doing here? You make a div for each element you want to block, and inside each div you can add a CSS rule (of your choice) to hide the iFrames. For each div you need three data attributes:

  1. data-jgc-remove-style
  2. data-jgc-placeholder-tag
  3. data-jgc-tag.
  • The first one (data-jgc-remove-style) must be the same URL that you previously blocked with autoCategories (eg. "youtube.com" and "spotify.com").
  • The second (data-jgc-placeholder-tag) must match the url of the iframes.
  • The third (data-jgc-tag) is the cookie tag you have on autoCategories

That's it. If the user accepts the cookies, JGC removes those divs and makes the iFrames visible again (and they do not flicker!).

It also works with manual cookie blocking! You don't need the autoMode