Google AMP - Iframes

Conditions to be Followed for iFrames

The conditions to be taken care while using iframe in AMP pages are as follows −

The url used on an iframe has to be a https request or data-URI or using srcdoc attribute.
amp-iframe by default will have sandbox attribute added to it. The sandbox attribute will be set to empty. A empty value to sandbox means that the iframe is maximum sandboxed (extra restriction on iframe). We can add values to the sandbox which will discuss with the help of an example below.
A amp-iframe cannot be displayed at the top of the page, it should be almost 600px away from the top or within the first 75% of the viewport when scrolled on top. Incase you have to display iframe at the start, you need to add placeholder to the iframe which we will discuss with the help of examples later in the tutorial.
amp-iframe must not have same origin as the container. For example, if your main site is on www.xyz.com , you cannot have iframe src as www.xyz.com/urlname. It can take other such as.xyz.com, example.xyz.com etc.

To work with iframes, we need to add the following script −

<script async custom-element = "amp-iframe" 
   src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Amp-iframe format is as follows −

<amp-iframe width = "600" title = "Google map" 
   height = "400" layout = "responsive"
   sandbox = "allow-scripts allow-same-origin allow-popups"
   frameborder = "0"
   src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
</amp-iframe>

Let us understand this with the help of a working example where will use iframe to display Google maps as given below.

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Iframe</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:-amp-start 8s steps(1,end) 0s 
            1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both}
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style><noscript>
      <style amp-boilerplate>
         body{-webkit-animation:none;-moz-animation:
         none;-ms-animation:none;animation:none}
      </style></noscript>

      <script async custom-element = "amp-iframe" 
         src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
      ></script>
      
      <style>
         div {
            height:850px;
            text-align:center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Iframe</h3>
      <div>
         Google Maps in Iframe
      </div>
      <h3>Google AMP - Amp Iframe</h3>
      <amp-iframe width = "600"
         title = "Google map"
         height = "400"
         layout = "responsive"
         sandbox = "allow-scripts allow-same-origin allow-popups"
         frameborder = "0" src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
      </amp-iframe>
   </body>
</html>

Output

Observe that we have placed the iframe at more than 600px from the top. It gives an error as shown below −

In the example above, we have used sandbox with values as given below −

sandbox = "allow-scripts allow-same-origin allow-popups"

Sandbox attribute acts like a permission to the contents to be loaded inside iframe. Here we are allowing all the scripts to be loaded which are coming from the Google maps links. Incase we are not giving sandbox attribute, this is the error displayed which blocks the content to be loaded in the iframe −

Note that we have to give the right permission to the sandbox. You can find the details of all the permissions to be given to sandbox here − https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox.

We can make use of placeholder attribute inside an amp-iframe to get rid of the more than 600px condition.

A working example for the same is given below −

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Iframe</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,  minimum-scale=1,initial-scale=1">

      <style amp-boilerplate>
         body{
            -webkit-animation:-amp-start 8s steps(1,end) 0s 
            1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>

      <script async custom-element = "amp-iframe" 
         src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
      </script>

      <style>
         div {
            height:850px;
            text-align:center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Iframe</h3>

      <amp-iframe width = "600"
         title = "Google map"
         height = "400"
         layout = "responsive"
         sandbox = "allow-scripts allow-same-origin allow-popups"
         frameborder = "0"
         src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">

         <amp-img layout = "fill" src = "images/loading.jpg" placeholder></amp-img>
      </amp-iframe>
   </body>
</html>

We have used amp-img as a placeholder as follows −

<amp-iframe width = "600"
   title = "Google map"
   height = "400"
   layout = "responsive"
   sandbox = "allow-scripts allow-same-origin allow-popups"
   frameborder = "0"
   src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie = UTF8&iwloc = &output = embed">
   
   <amp-img layout = "fill" src = "images/loading.jpg" placeholder></amp-img>
</amp-iframe>

In this case, the restriction of 600px and amp-iframe in 75% viewport is not considered. A loading indicator (three dots) are shown on the image is used as placeholder, which is basically for the amp-iframe src. Once the iframe contents are loaded, the image is removed and the iframe content is shown as displayed in the output shown below −

Output

Previous Page Print Page