What Will I Learn?
This article demonstrates a possible solution to fix
amp-iframe, if it isn't loading correctly on AMP website.
- AMP for WordPress plugin;
- Basic CSS & HTML knowledge;
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.
- AMP for WordPress: https://wordpress.org/plugins/amp/
- AMP.dev: https://amp.dev/documentation/components/amp-animation/
Originally published at https://ampire.city on October 23, 2020.