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.
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>
Awesome thank you! Do you know of a way to fix the flash of a white box that happens just before the iframe loads?
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.
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.