Skip to content

Commit

Permalink
updated to match template (#30087)
Browse files Browse the repository at this point in the history 
* updated to match template

* pretty
  • Loading branch information
@CrystalOnScript
CrystalOnScript committed Sep 2, 2020
1 parent 1ab6b3e commit b442f33
Show file tree
Hide file tree
Showing 5 changed files with 276 additions and 207 deletions.
64 changes: 34 additions & 30 deletions extensions/amp-beopinion/amp-beopinion.md
View file
Expand Up @@ -24,7 +24,7 @@ limitations under the License.

# amp-beopinion

## Behavior
## Usage

The `amp-beopinion` component allows you to embed [BeOpinion](https://beop.io/) content in your AMP page for a given BeOpinion account. BeOpinion is a tool for content creators to add interactive blocks such as polls and quizzes to their pages. BeOpinion mostly works with journalists of major media groups in Europe.

Expand Down Expand Up @@ -59,42 +59,46 @@ The `amp-beopinion` component allows you to embed [BeOpinion](https://beop.io/)
</amp-ad>
```

## Appearance

BeOpinion does not currently provide an API that yields fixed aspect ratio for embedded contents. Currently, AMP automatically proportionally scales the content to fit the provided size, but this may yield less than ideal appearance. You might need to manually tweak the provided width and height. Also, you can use the `media` attribute to select the aspect ratio based on the screen width.

## Placeholders & fallbacks
### Placeholders & fallbacks

An element marked with a `placeholder` attribute displays while the content for the content is loading or initializing. Placeholders are hidden once the AMP component's content displays. An element marked with a `fallback` attribute displays if `amp-beopinion` isn't supported by the browser or if the content doesn't exist or has been deleted.

Visit the [Placeholders & fallbacks](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders) guide to learn more about how placeholders and fallbacks interact for the `amp-beopinion` component.

## Attributes

<table>
<tr>
<td width="40%"><strong>data-account (required)</strong></td>
<td>The ID of the BeOpinion account (page owner).</td>
</tr>
<tr>
<td width="40%"><strong>data-content (optional)</strong></td>
<td>The ID of the BeOpinion content to be displayed on the page.</td>
</tr>
<tr>
<td width="40%"><strong>data-name (optional)</strong></td>
<td>The name of the BeOpinion slot on the page.</td>
</tr>
<tr>
<td width="40%"><strong>data-my-content (optional - <code>amp-ad</code> only !)</strong></td>
<td>For <code>amp-ad</code> elements of type <code>beopinion</code>, the value can be set to <code>"0"</code> (default value).
Warning: the <code>amp-beopinion</code> element overrides this value to <code>"1"</code>, to prevent the serving of ads outside of an <code>amp-ad</code> element.</td>
</tr>
<tr>
<td width="40%"><strong>common attributes</strong></td>
<td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
</tr>
</table>
### `data-account`

The ID of the BeOpinion account (page owner).

### `data-content` (optional)

The ID of the BeOpinion content to be displayed on the page.

### `data-name` (optional)

The name of the BeOpinion slot on the page.

[filter formats="ads"]

### `data-my-content` (optional)

For `amp-ad` elements of type `beopinion`, the value can be set to `"0"`
(default value).

[tip type="important"]

The `amp-beopinion` element overrides this value to `"1"`, to prevent the
serving of ads outside of an `amp-ad` element.

[/tip]

[/filter]<!-- formats="ads" -->

## Styling

BeOpinion does not currently provide an API that yields fixed aspect ratio for embedded contents. Currently, AMP automatically proportionally scales the content to fit the provided size, but this may yield less than ideal appearance. You might need to manually tweak the provided width and height. Also, you can use the `media` attribute to select the aspect ratio based on the screen width.

## Validation

See [amp-beopinion rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-beopinion/validator-amp-beopinion.protoascii) in the AMP validator specification.
See [amp-beopinion rules](validator-amp-beopinion.protoascii) in the AMP validator specification.
81 changes: 53 additions & 28 deletions extensions/amp-bodymovin-animation/amp-bodymovin-animation.md
View file
Expand Up @@ -24,14 +24,12 @@ limitations under the License.

# amp-bodymovin-animation

The `<amp-bodymovin-animation>` component embeds an [AirBnB Bodymovin animation player](http://airbnb.io/lottie/), which renders an animation from JSON generated by [Adobe After Effects](https://www.adobe.com/products/aftereffects.html).
## Usage

## Behavior
The `<amp-bodymovin-animation>` component embeds an [AirBnB Bodymovin animation player](http://airbnb.io/lottie/), which renders an animation from JSON generated by [Adobe After Effects](https://www.adobe.com/products/aftereffects.html).

The `width` and `height` attributes determine the aspect ratio of the animation embedded in responsive layouts.

Example:

```html
<amp-bodymovin-animation
layout="fixed"
Expand All @@ -45,33 +43,60 @@ Example:

## Attributes

<table>
<tr>
<td width="40%"><strong>src</strong></td>
<td>The path to the exported Bodymovin animation object. Must be <code>https</code> protocol.</td>
</tr>
<tr>
<td width="40%"><strong>loop (optional)</strong></td>
<td>Indicates whether the animation should be looping or not. By default, this attribute is set to <code>true</code>. Values for this attribute can be: <code>true</code>, <code>false</code>, or a number value. If a number is specified, the animation loops that number of times.</td>
</tr>
<tr>
<td width="40%"><strong>noautoplay (optional)</strong></td>
<td>By default, an animation autoplays. If this attribute is added the video waits for an action to start playing.</td>
</tr>
<tr>
<td width="40%"><strong>renderer (optional)</strong></td>
<td>By default, this component uses the SVG renderer, this uses a light version of the Bodymovin animation player. However, if developers feel that they need the full player and want to use an HTML renderer they may do so by specifying the <code>renderer</code> attribute to be <code>html</code>.<br>This attribute only accepts the values <code>html</code> and <code>svg</code>.</td>
</tr>
<tr>
<td width="40%"><strong>common attributes</strong></td>
<td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
</tr>
</table>
### `src`

The path to the exported Bodymovin animation object. Must be `https` protocol.

### `loop` (optional)

Indicates whether the animation should be looping or not. By default, this
attribute is set to `true`. Values for this attribute can be: `true`, `false`,
or a number value. If a number is specified, the animation loops that number of
times.

### `noautoplay` (optional)

By default, an animation autoplays. If this attribute is added the video waits
for an action to start playing.

### `renderer` (optional)

By default, this component uses the SVG renderer, this uses a light version of
the Bodymovin animation player. However, if developers feel that they need the
full player and want to use an HTML renderer they may do so by specifying the
`renderer` attribute to be `html`.

This attribute only accepts the values `html` and `svg`.

### Common attributes

This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
extended to AMP components.

## Actions

Please see [AMP Action Documentation](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events#amp-bodymovin-animation) for the actions available on `amp-bodymovin-animation` component.
### `play`

Plays the animation.

### `pause`

Pauses the animation.

### `stop`

Stops the animation.

### `seekTo(time=INTEGER)`

Sets the `currentTime` of the animation to the specified value and pauses
animation.

### `seekTo(percent=[0,1])`

Uses the given percentage value to determine the `currentTime` of the animation
to the specified value and pauses animation.

## Validation

See [amp-bodymovin-animation rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-bodymovin-animation/validator-amp-bodymovin-animation.protoascii) in the AMP validator specification.
See [amp-bodymovin-animation rules](validator-amp-bodymovin-animation.protoascii) in the AMP validator specification.
129 changes: 75 additions & 54 deletions extensions/amp-brid-player/amp-brid-player.md
View file
Expand Up @@ -26,12 +26,8 @@ limitations under the License.

An `amp-brid-player` displays the Brid Player used in [Brid.tv](https://www.brid.tv/) Video Platform.

## Example

The `width` and `height` attributes determine the aspect ratio of the player embedded in responsive layouts.

Example:

```html
<amp-brid-player
data-partner="264"
Expand All @@ -44,56 +40,81 @@ Example:
</amp-brid-player>
```

## Attributes

<table>
<tr>
<td width="40%"><strong>autoplay</strong></td>
<td>If this attribute is present, and the browser supports autoplay:
<ul>
<li>the video is automatically muted before autoplay starts</li>
<li>when the video is scrolled out of view, the video is paused</li>
<li>when the video is scrolled into view, the video resumes playback</li>
<li>when the user taps the video, the video is unmuted</li>
<li>if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.</li>
</ul></td>
</tr>
<tr>
<td width="40%"><strong>data-partner</strong></td>
<td>The Brid.tv partner ID.</td>
</tr>
<tr>
<td width="40%"><strong>data-player</strong></td>
<td>The Brid.tv player ID. Specific to every partner.</td>
</tr>
<tr>
<td width="40%"><strong>data-video</strong></td>
<td>The Brid.tv video ID.</td>
</tr>
<tr>
<td width="40%"><strong>data-playlist</strong></td>
<td>The Brid.tv playlist ID or custom string value for dynamic playlists.</td>
</tr>
<tr>
<td width="40%"><strong>data-outstream</strong></td>
<td>The Brid.tv outstream unit ID.</td>
</tr>
<tr>
<td width="40%"><strong>data-dynamic</strong></td>
<td>Parameter used to specify type of dynamic playlist, e.g. latest, channel, tag.</td>
</tr>
<tr>
<td width="40%"><strong>common attributes</strong></td>
<td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
</tr>
<tr>
<td width="40%"><strong>dock</strong></td>
<td><strong>Requires <code>amp-video-docking</code> extension.</strong> If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
For more details, see <a href="https://amp.dev/documentation/components/amp-video-docking">documentation on the docking extension itself.</a></td>
</tr>
</table>

Embed code must either have video, playlist or outstream attribute.
### `autoplay`

If this attribute is present, and the browser supports autoplay:

- the video is automatically muted before autoplay starts
- when the video is scrolled out of view, the video is paused
- when the video is scrolled into view, the video resumes playback
- when the user taps the video, the video is unmuted
- if the user has interacted with the video (e.g., mutes/unmutes,
pauses/resumes, etc.), and the video is scrolled in or out of view, the
state of the video remains as how the user left it. For example, if the user
pauses the video, then scrolls the video out of view and returns to the
video, the video is still paused.

### `data-partner`

The Brid.tv partner ID.

### `data-player`

The Brid.tv player ID. Specific to every partner.

### `data-video`

The Brid.tv video ID. Embed code must either have `video`, `playlist` or
`outstream` attribute.

### `data-playlist`

The Brid.tv playlist ID or custom string value for dynamic playlists. Embed code
must either have `video`, `playlist` or `outstream` attribute.

### `data-outstream`

The Brid.tv outstream unit ID. Embed code must either have `video`, `playlist`
or `outstream` attribute.

### `data-dynamic`

Parameter used to specify type of dynamic playlist, e.g. latest, channel, tag.

### `dock`

**Requires `amp-video-docking` extension.** If this attribute is present and the
video is playing manually, the video will be "minimized" and fixed to a corner
or an element when the user scrolls out of the video component's visual area.

For more details, see [documentation on the docking extension itself](https://amp.dev/documentation/components/amp-video-docking).

### Common attributes

This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
extended to AMP components.

## Actions

### `play`

Plays the video.

### `pause`

Pauses the video.

### `mute`

Mutes the video.

### `unmute`

Unmutes the video.

### `fullscreencenter`

Takes the video to fullscreen.

## Validation

Expand Down

0 comments on commit b442f33

Please sign in to comment.