New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
5 participants
@cramforce
Member

cramforce commented Oct 9, 2015

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.

@dvoytenko

This comment has been minimized.

Collaborator

dvoytenko commented Oct 12, 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.

@tmaslen

This comment has been minimized.

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

This comment has been minimized.

Member

cramforce commented Oct 13, 2015

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

@tmaslen

This comment has been minimized.

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

This comment has been minimized.

Member

cramforce commented Oct 13, 2015

@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

This comment has been minimized.

Collaborator

dvoytenko commented Oct 13, 2015

@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

This comment has been minimized.

Member

cramforce commented Oct 13, 2015

@dvoytenko No. Will remove

@rudygalfi

This comment has been minimized.

Contributor

rudygalfi commented Nov 2, 2015

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

This comment has been minimized.

Member

cramforce commented Nov 2, 2015

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

@camelburrito

This comment has been minimized.

Collaborator

camelburrito commented Dec 18, 2015

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

This comment has been minimized.

Contributor

rudygalfi commented Jan 5, 2016

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