This article demonstrates a possible solution to fix
amp-iframe, if it isn’t loading correctly on AMP website.
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.
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>
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.
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.