I2I: Create an AMP component for Vidazoo widget

[mfainshtein]

Summary

Vidazoo would like to create an AMP component that embeds the Vidazoo widget. This component will allow publishers to easily integrate Vidazoo widgets into their AMP pages while enjoying a native look and feel. The Vidazoo widget provides publishers with the ability to integrate various content formats, including stories (image and text), galleries (image+text), video, audio, or Js embeds.

Design document

https://github.com/Vidazoo/amphtml/blob/extension/amp-vidazoo-widget/extensions/amp-vidazoo-widget/amp-vidazoo-widget.md

Motivation

Our clients, who currently use Vidazoo widgets on their non-amp pages need the ability to add Vidazoo widgets to their AMP versions. Many of our Publishers are already on the waiting list for this integration. Without AMP, the Vidazoo widget component publishers and their developers cannot align their non-amp mobile experience with their AMP pages experience. Additionally, they cannot set the widget's core functionality by leveraging existing AMP components such as AMP-iframe. They cannot communicate between the elements inside and outside the iframe.

Additional Context

Vidazoo widget's core behavior requires communicating with post-message from the internal iframe to the widget logic, which adjusts the internal widget size, orientation, and UI, based on the user's device size and his interactions, such as scrolling, and detection of the widget within the user's viewport.

Vidazoo widget's AMP component grants the publisher a hassle-free integration by requiring only the widget-id and layout, which should increase the widget's adoption and prevent integration errors.

Example of AMP Page with Vidazoo widget: https://github.com/Vidazoo/amphtml/blob/extension/amp-vidazoo-widget/examples/vidazoo-widget.amp.html

/cc @ampproject/wg-approvers

[mfainshtein]

I would like to kindly follow up and see if there is any update or expected SLA for the review and approval.

[mfainshtein]

We have several publishers that are waiting for our AMP support. Please let us know what is the status and SLA for review and approval?

[alanorozco]

@mfainshtein Apologies for the late reply. These tend to fall off my plate since I2Is need to go through design review. This I2I needs to be approved during a design review before PR moves forward.

Additionally, please explain what the component actually does:

• How does it change the document?
• If it's a video player, why can't a publisher use amp-video-iframe instead? Please be specific.

[mfainshtein]

@alanorozco thanks for the reply. Please let us know if we need to do anything else apart from this I2I as part of the design review. Per your required clarifications, please see our answers inline below.

1. How does it change the document?

It is adding the widget component to the document without changing anything in the document itself.

2. If it's a video player, why can't a publisher use amp-video-iframe instead? Please be specific.

Vidazoo widget's core behavior requires communicating with post-message from the internal iframe to the widget logic, which adjusts the internal widget size, orientation, and UI, based on the user's device size and his interactions, such as scrolling, and detection of the widget within the user's viewport. As per our understanding, this is not possible in amp-video-iframe.

[alanorozco]

Thanks for clarifying further.

It is adding the widget component to the document without changing anything in the document itself.

That is changing the document. What's the widget's tree?

which adjusts the internal widget size, orientation, and UI, based on the user's device size and his interactions, such as scrolling, and detection of the widget within the user's viewport. As per our understanding, this is not possible in amp-video-iframe.

Internal widget size is possible since the iframe is sized. If you mean resizing the AMP component, that's only possible on certain cases via attemptChangeHeight.

based on the user's device size

You don't need the viewport's size for this? A video e.g. < 350px wide will almost always be mobile.

and his interactions, such as scrolling, and detection of the widget within the user's viewport.

There's a getIntersection method in amp-video-iframe that gives you this viewability information.

[mfainshtein]

The widget document tree is as follow:

<div class="i-amphtml-vidazoo-wrapper">
    <div class="i-amphtml-vidazoo-floater">
        <iframe src="https://static.vidazoo.com/basev/amp/artemis/0.1/index.html" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
    </div>
</div>

Regarding the rest of the points regarding amp-video-iframe: We need the widget code to create an intersection observer, when the widget is out of view, we need to dock it. We have different docking strategies with different styles and views for the site owner to select from. The widget content has various content formats (except vide), including stories (image and text), galleries (image+text), video, audio, or Js embeds.

[alanorozco]

We need the widget code to create an intersection observer, when the widget is out of view, we need to dock it.

Have you considered integrating with amp-video-docking? If you implement the VideoInterface you get a lot of the described behavior for free.

[alanorozco]

(amp-video-iframe already works with dock by the way.)

[mfainshtein]

I would like to kindly follow up and see if there is any update or expected SLA for the review and approval.

[alanorozco]

@mfainshtein

1. Components need to be approved during Design Review. You have not booked a session.
2. You haven't specified how you can't use amp-video-iframe/etc. Please clarify.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.