Overview

AMP currently does not allows iframes in the first 600px of a page or the first 75% of the first viewport. It also does not allow iframes to resize themselves. The new element <amp-click-to-play> is a way to reconcile AMP's goals of quick prerendering and predictable page layout with relaxing the conditions outlined above. E.g. this allows a video player to be the first thing on a page.

Note that we might do other things to address the same domain, but this approach will be the one providing the most freedom.

Usage

  <amp-click-to-play>
    <button placeholder><amp-img src="video-poster.jpg" width=300 height=400></amp-img></button>
    <div><amp-iframe src="https://example.com/cool-iframe.html" width=300 height=400></amp-iframe></div>
  </amp-click-to-play>

Details

The element will be shipped as an extension with potential to upgrade to a builtin element once it is stable.

Behavior

When displaying <amp-click-to-play> initially only the child with the attribute placeholder is shown. When that element is clicked (aria roles and tab index should be added as appropriate) the placeholder is hidden and replaced with the child that has a content attribute.

With low priority the actual content will be loaded before the users clicks, so that when they click loading is in the best case instant. This feature may need to be opt in per component.

Relaxed restrictions on iframes

• Iframes loaded through <amp-click-to-play> can be anywhere on the page.
• Iframes loaded through <amp-click-to-play> can resize themselves.
• If a first class embed (e.g. for a comment system) needs resizing it can allow this through <amp-click-to-play> as well.

Still TBD if we want to put any limits on the number or frequency of resizing.