The code snippet in your question is a filter, but it isn’t built properly:
- A filter needs a function that takes in the thing to be filtered as the first parameter, and returns the new version
- Your function ignores the first parameter, breaking any changes that have already been made
- Your function doesn’t always return a value
So, lets start with the function:
function iframe_image_lazy_load($the_content) {
$thecontent = get_the_content();
if(!empty($thecontent)) {
... do modifications to iframes
return $post->saveHTML();
}
}
add_filter('the_content', 'iframe_image_lazy_load', 15);
First, there are no iframes to modify, those happened on the_content
filter, and got passed in as the parameter, but you ignored that and got the original.
As a result, the string you’re working with just contains OEmbed URLs, no iframes. Lets fix that:
function iframe_image_lazy_load($content) {
if(!empty($content)) {
... do modifications to iframes
return $post->saveHTML();
}
}
add_filter('the_content', 'iframe_image_lazy_load', 15);
Notice I used variable passed to the function, instead of ignoring it and retrieving the original content. I also fixed the indentation levels, bad indentation is a great way to get bugs.
Next, the if statement is unnecessary, lets turn it into a guard and exit early:
function iframe_image_lazy_load($content) {
if(empty($content)) {
return $content;
}
... do modifications to iframes
return $post->saveHTML();
}
add_filter('the_content', 'iframe_image_lazy_load', 15);
OEmbed Filters
Thinking about these things in terms of HTML strings with iframes in them is a limiting and narrow way to view things. These are OEmbeds! So why not filter OEmbeds 🤔, we can even use browser native lazy loading! Why simulate lazy loading by undoing all the savings with JS to implement it?
Something like this:
function lazy_loaded_iframes( $code ) {
return str_replace ( '<iframe ' , '<iframe loading="lazy"' , $code );
}
add_filter( 'embed_oembed_html', 'lazy_loaded_iframes' );