-
Notifications
You must be signed in to change notification settings - Fork 2
How to avoid flickering
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:
data-jgc-remove-style
data-jgc-placeholder-tag
-
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 onautoCategories
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