Skip to content
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.

Sign up for GitHub

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

📖 Specify how amp-video-iframe can be used by video vendors #25952

Merged
merged 8 commits into from
Dec 9, 2019
Merged

📖 Specify how amp-video-iframe can be used by video vendors #25952

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6c6b82d
📖 Specify how amp-video-iframe can be used by video vendors
alanorozco Dec 9, 2019
27996e9
Specify inner document
alanorozco Dec 9, 2019
67a0e63
As bullet point
alanorozco Dec 9, 2019
7844d7d
Update amp-video-iframe.md
alanorozco Dec 9, 2019
5748f36
format
alanorozco Dec 9, 2019
9edf04c
16:9 makes more sense
alanorozco Dec 9, 2019
76d651f
whitespace
alanorozco Dec 9, 2019
0187cb9
fix 404
alanorozco Dec 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 27 additions & 2 deletions extensions/amp-video-iframe/amp-video-iframe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ supported by the AMP component library.
3. If you've built a **custom player** or are using one provided by an **unsupported 3rd party**, **you should use `amp-video-iframe`**. This is different from using [`amp-iframe`](https://amp.dev/documentation/components/amp-iframe) in that it enables
[Video Features on AMP](../../spec/amp-video-interface.md). See [behavior](#behavior) below for more details.

4. If you're a **3rd party video vendor**, **you can use `amp-video-iframe`** to [provide a simple way for authors to embed video.](#vendors)

## Behavior

`amp-video-iframe` has several important differences from vanilla iframes and `amp-iframe`.
Expand Down Expand Up @@ -129,14 +131,37 @@ Include an `amp-video-iframe` on your AMP document:
<amp-video-iframe
layout="responsive"
width="16"
height="16"
height="9"
src="/my-video-player.html"
poster="/my-video-poster.jpg"
>
</amp-video-iframe>
```

## Integration inside the frame
`my-video-player.html` is the inner document loaded inside the frame that plays the video. This document must include and bootstrap [an integration script](#integration) so that the AMP document including the `<amp-video-iframe>` can coordinate the video's playback.

### <a id="vendors"></a> For third-party video vendors

If you're a vendor that does _not_ provide a [custom video player component](../../spec/amp-video-interface.md), you can use `amp-video-iframe` to allow AMP document authors to embed video provided through your service.

By hosting a generic [integration document](#integration) that can reference videos with URL parameters, authors don't need to provide the inner player document themselves, but only include an `<amp-video-iframe>` tag in the AMP document:

```html
<amp-video-iframe
layout="responsive"
width="16"
height="9"
src="https://video-provider.example/amp-video-iframe.html?videoid=PROVIDED_VIDEO_ID"
poster="https://video-provider.example/amp-video-iframe-poster.jpg?videoid=PROVIDED_VIDEO_ID"
>
</amp-video-iframe>
```

The dynamic server-side document `amp-video-iframe.html` includes the video as necessary per the configurable `PROVIDED_VIDEO_ID` parameter. This document bootstraps the [iframe integration script](#integration) so that the AMP document can coordinate with the player.

Note: For most video providers, `amp-video-iframe` provides enough tools for common playback actions (see possible [methods](#method) and [events](#postEvent)). Refer to the [vendor-specific video player spec](../../spec/amp-3p-video.md) for more details on whether you can use `amp-video-iframe` or you should build a third-party player component instead.

## <a id="integration"></a> Integration inside the frame

In order for the video integration to work, the embedded document (e.g. `my-video-player.html`) must include a small library:

Expand Down