AMP-Iframe isn’t Loading? Quick fix to AMP-Iframe Bug
What Will I Learn?
This article demonstrates a possible solution to fix amp-iframe, if it isn’t loading correctly on AMP website.
Requirements:
- AMP for WordPress plugin;
- Basic CSS & HTML knowledge;
Useful links:
- AMP for WordPress: https://wordpress.org/plugins/amp/
- AMP.dev: https://amp.dev/documentation/components/amp-animation/
If you are experiencing this, this guide will help you.
Fixing AMP Iframe BUG
Recently I ran in into a problem of amp-iframe not working on one of my developed websites. It was strange because the website was a sub-brand copy of another one with AMP iframes working just fine. Once I tried to find a solution, nothing came up, so I decided to write this quick guide to fix this amp-iframe loading bug. Of course it doesn’t mean it is the panacea to all the problems, related to AMP iframes, but it is rather an unusual one. If you want to jump straight to the answer – click here. Otherwise, let’s make sure that the fundamentals are working.
1. Check if AMP-Iframe is Loaded
First you have to be sure that amp-iframe-0.1.js is loading correctly on your website. If you have AMP for WordPress plugin installed, it should add the required code automatically once amp-iframe is present. If the required script is not loaded, be sure either to install the plugin or add the following line into your header. If you don’t know how to do it, read this tutorial of inserting code to <head>.
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>2. Check AMP-Iframe Position
The trick is pretty simple – in order for amp-iframe to work its elements must be positioned outside the first 75% of the viewport or 600px from the top (whichever is smaller). You can check the detailed information on Console of your developer tools (CTRL+SHIFT+i on Win; Option + ⌘ + C on Mac). In my case, amp-iframe is located 571px from the top of the screen, thus as the solution I increased the height of hero banner by 30px and AMP iframe started working.
After I increased hero height by as little as 30px, amp-iframe started working again.
Fixing AMP Iframe BUG on AMP website
If you still cannot make amp-iframe working on your website – maybe you are missing some key details. You can learn more about setting up AMP-iframe here. Lastly, if nothing helps – consider hiring AMP professional.
Versions:
WordPress 5.5.1
AMP 2.0.5.