iframes are an excellent way to embed external media into a WordPress site. They are widely used for embedding videos, calendars, maps, interactive libraries and scripts from different platforms. 

While most of the time iframes load efficiently, sometimes we may have an issue with an iframe not showing content, partial content or iframe not loading at all. This behavior could be intermittent or permanent. Also, this issue may happen only when the <div> or section containing the iframe is not in the view port of the user and once the user scrolls to the iframe containing <div>, it loads fine.

Here are two example scenarios: 

1. A client of mine have a calendar iframe from GoHighLevel which loads fine if its in the view port, otherwise not.
2. Another time, one of my client had the issue where google maps were not loading correctly whether in view port or not.

Today we are going to explore the most common reason for the iframe not loading issue on a WordPress site. 

It’s my observation that the iframe not loading issue occurs mostly on sites which have some cache or speed optimization related plugin installed. Some image optimization and compression plugin can also cause this issue. For example Lightspeed cache, WP Total Cache, WP Smush image optimizer, Nitropack etc etc. 

What does these plugins do? 

These plugins have the option “Lazyload iframes” which causes the delayed initialization of iframes during page load to enhance page speed and performance.

These plugins do this by applying a CSS class to the iframes. Mostly the class name is “lazyloaded”, like the image below:

With this class applied, the loading of iframe does occur only when its in the view port or after the initial content of the page has loaded. While this behaviors increases page loading speed, sometimes it hinders the iframe resizing script and results in iframe not showing content or not expanding to it’s full height to display all the content.

How to fix this iframe not loading issue?

There are two methods to fix this issue. 

Method 1: Disable or exclude all iframes from Lazyloading.

Most of the plugins including Lightspeed cache, WP Smush and Nitropack has an option to exclude iframes from Lazyloading. Disabling this option will affect all iframes on the site and may impact site performance too.

Method 2: Exclude only specific iframes from Lazyloading.

This is the better option. Sometimes, we may not need to exclude all iframes from Lazyloading, so in this case we can target the specific iframe and exclude it using a custom CSS class or id. 

1. We can apply this custom class or id to the iframe itself and exclude it by going to the respective cache plugin settings > exclude/exclusion list option.
2. If it’s not possible to do the option 1 above, we can wrap the iframe in a <div> container with class of our own and exclude this parent <div> instead.

<div class="lazyload_exclude">
<iframe src="iframeURL"></iframe>
</div>

In the example above, we use the parent <div> class “lazyload_exclude” and add it in the exclusion list of cache plugin.

Lastly, every cache plugin has its own predefined classes to exclude certain elements from Lazyloading. We can use those classes too instead of adding our custom classes.

I hope this method will be useful for most of the users who face iframe not loading issue on their WordPress sites. There are many more reasons for iframes not loading issue and we should deal with each issue accordingly.

For any questions or suggestion, comment below.