We have been using the Iframe module for years to embed lazy-loading <iframe> static HTML 'Explainers' on our educational website to great effect.

Our site students can view our Explainers embedded within the tutorial pages.

We use the Lazy module (https://www.drupal.org/project/lazy) to target any <iframe> elements and up until 3.01, that always worked fine.

Since 3.01, none of our <iframe> elements get 'tweaked' by the Lazy module for lazy-loading and so the entire collection is loaded at once.

You can see it in action with multiple <iframe> elements on a page here: https://bit-by-bit.org/node/6897

I understand from https://www.drupal.org/project/iframe/issues/3603949#comment-16664520 that this might be something to do with the how the src attribute is handled in the attributes object.

What we used to do in our template override was to extract out the src using this tweak…

  <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>

…but that no longer works with 3.01

As you might imagine, with pages such is this containing multiple

elements, the lazy-loading was an important asset so it would be nice to have it functioning again. Thanks all.
CommentFileSizeAuthor
#3 iframe-module-template-override.png120.24 KBsirclickalot

Comments

sirclickalot created an issue. See original summary.

smustgrave’s picture

smustgrave commented

There is https://www.drupal.org/project/iframe/issues/3470426

sirclickalot’s picture

sirclickalot
Primary language English
Location Somerset
commented
StatusFileSize
new iframe-module-template-override.png120.24 KB

I have managed to reinstate the lazy loading.

It's a bit of a botch job and I do not understand how it works but my observations might help maintainers to locate and deal with the cause of the regression behaviour.

The odd (but key) thing seemed to be the removal of class check in the opening div as illustrated below.

Comparing the module version iframe.html.twig with my theme-overridden version I have…

MODULE TEMPLATE

<div{% if attributes.class is not empty %} class="{{ attributes.class }}"{% endif %}>
  {% if text is not empty %}
    <h{{ headerlevel ?? 3 }} class="iframe_title">{{ text }}</h{{ headerlevel ?? 3 }}>
  {% endif %}
  <style type="text/css">{{ style|raw }}</style>
  <iframe {{ attributes }}>
    {{ 'Your browser does not support iframes, but you can visit <a href=":url">@text</a>'|t({ ':url': src, '@text': text }) }}
  </iframe>
</div>

THEME OVERRIDDEN TEMPLATE

<div>
  {% if text is not empty %}
    <h{{ headerlevel ?? 3 }} class="iframe_title">{{ text }}</h{{ headerlevel ?? 3 }}>
  {% endif %}
  <style>{{ style|raw }}</style>
  <iframe data-src="{{ src }}" class="lazyload" loading="lazy" {{ attributes }}>
    {{ 'Your browser does not support iframes, but you can visit <a href=":url">@text</a>'|t({ ':url': src, '@text': text }) }}
  </iframe>
</div>

Here is visual comparison of the two with the altered 3 lines highlighted…

iframe-module-template-override