What to do if your AllTrails HTML embed won’t display in WordPress

1 minute read

I recently ran into this issue after posting my review of Pennypack Trail, and I’m sure I’m not the only one in the world that has run into this issue. There seemed to be no documentation of this exact issue but with some searching the fix was actually quite simple.

If you’re AllTrails embed won’t display in WordPress, the likely culprit is the implementation of Lazy Loading. The fix is as simple as disabling the implementation for the <iframe> embed. This solution is also likely to work for any sort of HTML embed in WordPress where there is a conflict between it and Lazy Loading.

The first step is to retrieve the HMTL code for the AllTrails embed as you normally would. Simply place the code in your preferred location using either the Classic HTML editor or a Gutenburg block. It should appear similarly to the image below:

Out of the box, the HTML code for the embed should start as follows: <iframe class=”alltrails”. In order to fix the display issue with your AllTrails embed, you’ll want to make a simple modification to this leading code. The new code should read as follows: <iframe class=”alltrails-skip-lazy”.

It’s as simple as that.

As mentioned, I would imagine that this fix will work for any sort of conflict between an HTML embed and WordPress Lazy Loading. Although not detailing this exact issue, I have to give credit to WP Rocket for providing enough information to resolve this rendering problem.

I initially loaded the page in several mobile browsers (Samsung Internet, Chrome, and DuckDuckGo), and at least one of them made reference to Lazy Loading blocking rendering in some way. I also noticed that when previewing the post there was no issue (WordPress preview seems to not utilize Lazy Loading).

I’m not sure how common this issue is concerning AllTrail embeds, but hopefully I’ll save at least one person from endless frustration.

Leave a Comment