Make an Iframe wait to load until it is clicked

Hi I want this iframe to load only after the tab is clicked and the embed html is shown but I can’t figure out how to do this on webflow.

http://how-much-do-i-need-to-retire.webflow.io/

1 Like

Paste this in the Page Footer custom code section.

<script>
$('.w-tab-content iframe').each(function() {
    $(this).data('src', $(this).attr('src'));
    $(this).attr('src', ''); 
});
$('.w-tab-menu').on('click', '.w-tab-link', function() {
    $('.w-tab-content iframe').each(function() {
        $(this).attr('src', ''); 
    })
    .filter(':visible').each(function() {
        $(this).attr('src', $(this).data('src'))
    });
});
</script>
1 Like

Awesome thank you! Do you know of a way to fix the flash of a white box that happens just before the iframe loads?

http://old-how-much-do-i-need-to-retire.webflow.io/

https://preview.webflow.com/preview/old-how-much-do-i-need-to-retire?preview=f3ca363d6450f31c29028c6b7a4334f1

I think that’s the default background colour of the iframe’s document, might not be able to change it.

Hey Sam, I have a similar issue to this.

I have a massive page with loads of iFrames so looking for a way to optimise them but this code doesn’t seem to work for me. Any suggestions

Read only link: Webflow - WIP CanWaCH

@Ashley_Hewins you can use the intersectionObserver() method to observe when each of your iframe will enter the view and load their data-src accordingly.

1 Like

I have a similar problem, and this works like a charm for me. Only catch is that it keeps reloading the iframe if I click on the active tab link. Is there any way to avoid this?

This isn’t working for me - I don’t see a place to paste custom code at the page level, only at the project level. When I paste this code in the project footer, my iframes stop loading completely. Any thoughts?

My read-only link is here.

@lindsay Page level custom code is inserted in the page settings. Scroll all the way down.