Idea: Support for lazy loading of iframes

Adrian

• October 15, 2020 12:03

Hello,

 

We have marked our YouTube video iframes as described here: https://support.cookiebot.com/hc/en-us/articles/360003790854-Iframe-cookie-consent-with-YouTube-example and it works great.

What would be even better is a way for this functionality to also support lazy loading of videos, once the video iframe scrolls into viewport.

As the Cookiebot cookie consent for iframes / scripts works mostly in the same way as lazy loading does (by replacing the `data-src` with `src`), there is no way we can implement lazy loading for videos AND cookiebot consent altogether.

 

Do you think this is something worth considering for further iterations of cookiebot? 

 

Or is there already something that we could use to implement this like the API or some existing events/methods?

 

Thank you,

Adrian

1

• Official comment

  

  Richard van der Velde

  • November 26, 2020 08:52

  Hi Adrian,

  Since lazy loading also likes using data-src, you can also use data-cookieblock-src instead.
  Our auto blocker does the same thing, specifically to avoid clashing with lazy loaders.
• 

  Adrian

  • November 25, 2020 11:45
  • Edited

  We have managed to implement this by ourselves (thanks cookiebot for nothing).

  By removing the "data-cookieconsent" attribute from the <iframe> tag(s) and then, via Cookiebot's events, we have added an identifier (class name) to the <iframe>s only when the specific Cookie category was accepted. Afterwards, we re-initialized the lazy load functionality. This way, we have implemented consent for YouTube videos while also having them loading only when needed, and not directly after consent is given (which in our case is directly when the page loads, as we use Cookiebot as a Cookie wall -- users cannot continue unless they consent).

   

  You can find below our approach, for whomever might also be interested in this.

  0
• 

  Adrian

  • November 25, 2020 11:42
  • Edited

  // hook on the "CookiebotOnAccept" event
  // (this event triggers when the user accepts the use of cookies, as well as if the user has consented at an earlier visit)
  
  window.addEventListener('CookiebotOnAccept', function (e) {
  
  	// check if Marketing cookies have been accepted
      if (Cookiebot.consent.marketing) {
      	
      	// add an identifier to all iframes 
      	// (which should not have "src" attributes anymore, but "data-src" ones)
          $('iframe[data-src]').addClass('{your_identifier}');
  
          // next, re-initialize your lazy loading script
          // (first, also add {your_identifier} to the list of selectors in your lazy loading script setup)
      }
  }, false);

  0

Please sign in to leave a comment.