Streaming live at 10am (PST)

Make an Iframe wait to load until it is clicked


#1

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/


#2

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>

#3

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


#4

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