AMP IFrame is not working in AMP LightBox

Question

Example:-

  <amp-lightbox id="my-lightbox" layout="nodisplay">
    <div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0">
      <amp-iframe width="350" height="300" layout="fixed" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://ampbyexample.com/"></amp-iframe>
    </div>
 </amp-lightbox>

<button class="ampstart-btn caps m2" on="tap:my-lightbox" role="button" tabindex="0">Open Iframe in Lightbox</button>

I also tried to manipulate the position of iFrame 75% or 600px from the top but it's also not working.

The AMP iFrame contains Jquery UI Calendar which we want to use to get the delivery date selected by the user in our AMP Page.

Is it possible to get and pass the value in AMP iFrame?

Answer 1

If you are having problems with your iframe displaying, add a placeholder image to your iframe element. This will allow you to circumvent the 75%/600px restriction. You can add a placeholder like this:

  <amp-iframe width="350" height="300" layout="fixed" 
              sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" 
              src="https://ampbyexample.com/">
    <amp-img layout="fill"
             src="https://placekitten.com/g/300/300"
             placeholder></amp-img>
  </amp-iframe>

Updated (added sentence about sharing data with iframe parent)

If you are trying to send data from the amp-iframe to the parent, this will not work. The restriction is explained here: https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md