Amphtml: amp-iframe with video player blocked when fixed on top

[iwoak]

Hi, we are trying to put an amp-iframe element on page by absolute and fixed position at the bottom of the window.
This amp-iframe contain ours video-audio player, without ad contents, but with the audio spoken version of the visited article.
We receive error and so the iframe content blocked on a lot of devices:

dom.js:645 amp-iframe is not used for displaying fixed ad. Please use amp-sticky-ad and amp-ad instead.

On amp documentation i found that:

amp-iframe must not be used for the primary purpose of displaying advertising. It is OK to use amp-iframe for the purpose of displaying videos,
where part of the videos are advertising. This AMP policy may be enforced by not rendering the respective iframes. Advertising use cases should use amp-ad instead..

It seems that engine amp recognize ours video-audio content like an ad content.

You can reproduce this by:

• Enable dev tools and device toolbar
• Choose IPhone 6/7/8 Plus item
• Visit this page https://www.repstatic.it/cless/main/rep21/2017-v1/poc/video-iframe-blocked.html
• Click on audio icon on the bottom left corner

Wrong situation:

Correct:

Thank you all for your help
Bye
Ivan

[jpettitt]

The code that attempts to check if an iframe is an ad is here . If you make your iframe < 300px wide or < 50px high it will work.

[gilbertococchi]

@jasti do you think we can fix the Amp-Iframe fixed validation positioning to avoid this false positive?

[jasti]

The ideal solution is to use https://www.ampproject.org/docs/reference/components/amp-audio instead of using amp-iframe.
@jpettitt @lannka @aghassemi @ericlindley-g do you feel strongly that we need to allow amp-iframe with fixed positions at all? Can we translate all such use cases to use native AMP components so we can get rid of our hack iframe-ad detection logic.

[ericlindley-g]

There are valid use-cases for amp-iframe in fixed position (e.g. customer support chatbox), but I'm not sure if (or how many) folks are doing that in the wild.

Before enforcing such a restriction we'd have to do an audit to understand the impact (and what use cases we would need to support instead). So far I'm not sure if the work to do that is worth the benefit of restricting amp-iframe to non-fixed, but happy to discuss more.

[iwoak]

Yes, @jasti. I agree with ideal solution based on amp-audio, but we couldn't use it until amp audio hasn't this two possibilities:

1. required: attach amp-analytics on amp-audio for tracking our customers usage
2. desired: complete implementation of the media session api

It is very easy and convenient use amp-iframe with our audio-video player now so we can track by third-party analytics (webtreck, google analytics, ..) our customers usage over audio file. So, at the end I'm agree with @ericlindley-g and I hope there is an efficient way to avoid false positives over ad validation.

[jasti]

@iwoak for now, please go ahead with @jpettitt suggestion here: https://github.com/ampproject/amphtml/issues/18563#issuecomment-427461848

To @ericlindley-g for prioritization of amp-audio enhancement.

[ericlindley-g]

/cc @aghassemi @lannka — this still needs some thought to figure out prioritization, but I wanted to ask: who's team does this makes sense on (adding analytics capabilities to amp-audio)?

[aghassemi]

@ericlindley-g @lannka It does make sense to add analytics to amp-audio same way we have them for amp-video. I'd say analytics team is in the best position to define the events and triggers for this component.

[ericlindley-g]

/cc @jeffjose for above discussion

[jeffjose]

This sounds like a reasonable thing to do. @lannka / @zhouyx thoughts?

[lannka]

Honestly myself is not a big fan of the "ad detection" we put on amp-iframe. It's not really a restriction, it can only catch mistakes since it's so easy to work around.

Regarding to analytics for amp-audio, would it be enough if we expose a subset of the browser events as triggers:
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

[smokeyfro]

Is there anyway around the 600px from the top restriction?

I'm using amp-user-notification to slide-in our newsletter signup form, using an iframe with our Klaviyo embed code, but that doesn't work consistently on mobile due to https://github.com/ampproject/amphtml/issues/18995 and the signup form embed is hidden on screens that don't have enough vertical height.

I can get around the iframe bug by hiding the normal signup form on mobile and rather slide-in a simple panel with a cta that links to the subscribe page, but I need to get the newsletter slide working consistently on desktop before we can include it in the update.

[zhouyx]

Is there anyway around the 600px from the top restriction?

You should be able to skip the check by providing a placeholder.

Regarding the amp-user-notification issue, I've replied to #18995, let's track the issue there. Thanks.

[smokeyfro]

@zhouyx thanks for the placeholder tip - not sure how I missed that in the docs!

[aghassemi]

Closing as intended. placeholder is required for iframes above the fold for good UX.

[iwoak]

@aghassemi i'm sorry, but I still have the issue.
You can reproduce with the step described in first issue description, but I report here:

• Enable dev tools and device toolbar
• Choose IPhone 6/7/8 Plus item
• Visit this page https://www.repstatic.it/cless/main/rep21/2017-v1/poc/video-iframe-blocked.html
• Click on audio icon on the bottom left corner

And I still have amp-iframe blocked because amp runtime recognizes it like an adv, the code of this control is here https://github.com/ampproject/amphtml/blob/2dc29639a6c86844f69935d8c9d4b18ce1ebdfca/src/iframe-helper.js#L484 like @jpettitt said.

[gilbertococchi]

@jeffjose

Hi Ivan, confirmed that the issue still happens, I guess that's because the amp-iframe sits within a div#detail-audio_container container with position:fixed and AMP currently allows iFrames for Sticky Ads only.

Can we check whether the limit is too strict here as it's not Advertising and the amp-iframe contains the placeholder attribute?

[gilbertococchi]

@aghassemi @jasti can we please reopen this issue?

I've tested it again and it's still happening no matter the amp-iframe contains a Placeholder and it's not used for Advertising...

Steps to Reproduce:

• Open Chrome Dev Tool Bar
• Choose Device "IPhone 6/7/8 Plus"
• Visit this page https://www.repstatic.it/cless/main/rep21/2017-v1/poc/video-iframe-blocked.html
• Click on audio icon on the bottom left corner.

<amp-iframe height="60" sandbox="allow-scripts allow-same-origin" layout="fixed-height" frameborder="0" class="detail-audio_player" src="https://video.repubblica.it/embedaudio/audio-rep/m5s-dalle-assemblee-in-streaming-alla-festa-danzante-sul-barcone-trendy/315995/316626?adref=https://rep.repubblica.it/pwa/generale/2018/10/04/news/m5s_festa_barcone_tevere_di_maio-208177547/&dnsi&autostart=true&responsive=true&bgc=FFFFFF&_wt_visit_from=webapp.amp"> <amp-img layout="fill" src="https://www.repstatic.it/cless/main/rep21/2017-v1/img/placeholder.png" placeholder></amp-img></amp-iframe>