Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Intent to implement: New AMP element: click-to-play #571
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
Note that we might do other things to address the same domain, but this approach will be the one providing the most freedom.
<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>
The element will be shipped as an extension with potential to upgrade to a builtin element once it is stable.
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
Still TBD if we want to put any limits on the number or frequency of resizing.
referenced this issue
Oct 9, 2015
See http://www.bbc.com/news/technology-34066941. I think this is an interesting case of click-to-play as it's driven by user input (search really in this case). This implementation expends the iframe inline, but you could also imagine it going into lightbox-like container.
referenced this issue
Oct 13, 2015
Implementing the interface more fully with AMP specific elements would make it hard for us (the publisher) to write the content once and publish it into may different places (rwd page, amp page, native app). A click to play poster image in amp would fit our model better.
@tmaslen The actual simplest markup here is:
<amp-click-to-play> <amp-img placeholder src="video-poster.jpg" width=300 height=400></amp-img> <amp-iframe src="https://example.com/cool-iframe.html" width=300 height=400></amp-iframe> </amp-click-to-play>
I had the button there to avoid having to put aria into the example, but I think we can just add the aria attribute ourselves for the super simple cases.
@rudygalfi: Nice bikeshed :)
On Mon, Nov 2, 2015 at 8:37 AM rudygalfi email@example.com wrote:
I'm wondering if we should change the name of this in the docs (the header in the iframe documentation says "click-to-play") as it may result in confusion.
The behavior seems to be that the placeholder is rendered and then the iframe as soon as it's ready. None of this flow requires a user interaction (click). It also doesn't seem to be a part of the spec that the iframe rendering can be blocked on the click (which in my mind would be true click-to-play).