Intent to implement: New AMP element: click-to-play #571

Closed
cramforce opened this Issue Oct 9, 2015 · 11 comments

Projects

None yet

5 participants

@cramforce
Member

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.

@cramforce cramforce was assigned by dvoytenko Oct 9, 2015
@dvoytenko
Collaborator

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.

@tmaslen
tmaslen commented 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.

@cramforce
Member

@tmaslen I think allowing arbitrary markup as "poster" is needed by many publishers

@tmaslen
tmaslen commented Oct 13, 2015

I think I understand you now. In that case it makes no difference to us if the poster is an image or markup.

@cramforce
Member

@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.

@dvoytenko
Collaborator

@cramforce Is content strictly necessary? So far we assumed if it's not an internal element (e.g. placeholder, fallback, etc) - it must be the content. Thinking re:validation and re:attribute naming questions.

@cramforce
Member

@dvoytenko No. Will remove

@rudygalfi
Contributor

Side question: Could we call this element something that doesn't have "click" in it? amp-tap-to-play would be appropriate, but that's mobile only. Not sure if there's some more generic name that would cover desktop + mobile. amp-interact-frame?

@cramforce
Member

@rudygalfi: Nice bikeshed :)
I think click-to-play is the common industry term for this class of
behavior, so I see no real reason to diverge.

On Mon, Nov 2, 2015 at 8:37 AM rudygalfi notifications@github.com wrote:

Side question: Could we call this element something that doesn't have
"click" in it? amp-tap-to-play would be appropriate, but that's mobile
only. Not sure if there's some more generic name that would cover desktop +
mobile. amp-interact-frame?


Reply to this email directly or view it on GitHub
#571 (comment).

@cramforce cramforce assigned camelburrito and unassigned cramforce Nov 5, 2015
This was referenced Nov 20, 2015
@camelburrito
Collaborator

With amp-iframe supporting click-to-play now (and lets you place click-to-play vidoes on the top), i am closing this for now.

@rudygalfi
Contributor

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment