lazy loading of H5P content

Problem/Motivation

In our project we have several pages that include multiple H5P objects and it makes sense to be able to lazy load them as the user scrolls down the page and brings them into view.

We do this routinely for images using the the lazy → module and we extend the extend the functionality to the iframe → module by overriding the iframe.html.twig Twig template to add in the required classes etc.

We do this with the following Twig (HTML) code in the template...

  <iframe class="lazyload"{{ attributes|without('class','src') }} loading="lazy" data-src="{{ src }}">
    {{ 'Your browser does not support iframes, but you can visit <a href=":url">@text</a>'|t({ ':url': src, '@text': text }) }}
  </iframe>

With H5P we cannot do that because it does not use any templates to wrap up the renderable content so we cannot target the <iframe> elements that way.

Is there a way we can achieve the same effect with H5P?

Thanks all