Embed a player on an AMP page (Web Player)

🚧
JWP will cease to support and update the AMP solution by January 2024. For more information, please contact your JWP representative. We do not offer a migration option, as the feature is being fully deprecated.

You can embed a JWP web player to a Google AMP page by adding the amp-jwplayer component. When you add a web player to a Google AMP page, you have access to most of the web player functionality.

Restrictions

The AMP implementation restricts the following functionality.

Restriction	Solution
No unregistered content can be played.	Only content registered with your JWP account can be played by the amp-jwplayer component.
Neither custom modifications nor Javascript code can be added to the amp-jwplayer component.	All branding and behavior settings must be configured in your JWP dashboard.
JWP's float-on-scroll (`floating`) functionality is not permitted within the amp-jwplayer component.	You can configure Google AMP's amp-video-docking component to enable floating functionality that is similar to JWP's float-on-scroll functionality.

Requirements

Item Actions

Item	Actions
Player ID	From your player list page, click a player name. From the URL, copy the alphanumeric `player_key` value. Note the Player Size settings. These settings are used to configure the amp-jwplayer component. If you do not have an existing player, follow these instructions: From your player list page, click Create Player. On the SETUP tab, name the player and set the Player Size. Click Save. From the URL, copy the alphanumeric `player_key` value. Note the Player Size settings. These settings are used to configure the amp-jwplayer component.
Media ID or Playlist ID	(Non-outstream) Content to be displayed in the amp-jwplayer component If you configure the amp-jwplayer component as an ads-only video player ( outstream player ), this requirement does not apply. VIDEO From your dashboard, click Videos. Copy the ID from the MEDIA ID column. If this column does not appear, click the gear icon > Media ID. PLAYLIST From your dashboard, click Playlists. Click the name of a playlist. On the DEVELOPER or DEVELOPER RESOURCES tab, copy the Playlist ID.

Player ID

From your player list page, click a player name.
From the URL, copy the alphanumeric player_key value.
Note the Player Size settings. These settings are used to configure the amp-jwplayer component.

If you do not have an existing player, follow these instructions:

From your player list page, click Create Player.
On the SETUP tab, name the player and set the Player Size.
Click Save.
From the URL, copy the alphanumeric player_key value.
Note the Player Size settings. These settings are used to configure the amp-jwplayer component.

Media ID or Playlist ID

(Non-outstream) Content to be displayed in the amp-jwplayer component

If you configure the amp-jwplayer component as an ads-only video player ( outstream player ), this requirement does not apply.

VIDEO

From your dashboard, click Videos.
Copy the ID from the MEDIA ID column.
If this column does not appear, click the gear icon > Media ID.

PLAYLIST

From your dashboard, click Playlists.
Click the name of a playlist.
On the DEVELOPER or DEVELOPER RESOURCES tab, copy the Playlist ID.

Embed a player

In the <head> of the Google AMP page, add the custom element script for the amp-jwplayer component.

<script async custom-element="amp-jwplayer" src="https://cdn.ampproject.org/v0/amp-jwplayer-0.1.js"></script>

Add the amp-jwplayer component at the location on a page where the player should appear. Be sure to replace {player_id} and {media_id} or {playlist_id} as appropriate.

<amp-jwplayer
  data-player-id="{player_id}"
  data-media-id="{media_id}"
>
</amp-jwplayer>

<amp-jwplayer
  data-player-id="{player_id}"
  data-playlist-id="{playlist_id}"
>
</amp-jwplayer>

<amp-jwplayer 
  data-player-id="{player_id}" 
  data-media-id="outstream"
>
</amp-jwplayer>

Configure the amp-jwplayer component dimensions to match the Player Size settings in your JWP dashboard. Use the following examples to help you configure the dimensions.
```
layout="responsive"
width="16"
height="9"
```
```
width="640"
height="360"
```

(Optional) In your JWP dashboard, configure the appearance and behavior of the web player.

Additional settings

For non-outstream implementations, the amp-jwplayer component supports the following settings:

Contentual Article Matching
Search playlists
Content backfilling

Visit the JWP AMP component page for more information about additional configuration settings or AMP.