<img src="https://img.shields.io/badge/%20-ALL-%2300B180" style="float:left"/><br />



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.

<br />

You can embed a JWP web player to a <a href="https://amp.dev/about/how-amp-works/" target="_blank">Google AMP page</a> 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.

<br /> <hr />

## Restrictions

The AMP implementation restricts the following functionality.

RestrictionSolution
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.

<br /> <hr />

## Requirements

ItemActions
**Player ID**<ol><li>From your <a href="https://dashboard.jwplayer.com/#/players/list" target="_blank">player list page</a>, click a player name.</li><li>From the URL, copy the alphanumeric `player_key` value.</li><li>Note the **Player Size** settings. These settings are used to configure the amp-jwplayer component.</li></ol> If you do not have an existing player, follow these instructions: <ol><li>From your <a href="https://dashboard.jwplayer.com/#/players/list" target="_blank">player list page</a>, click **Create Player**.</li><li> On the **SETUP** tab, name the player and set the **Player Size**.</li><li>Click **Save**.</li><li>From the URL, copy the alphanumeric `player_key` value.</li><li>Note the **Player Size** settings. These settings are used to configure the amp-jwplayer component.</li></ol>
**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 ( <<glossary:outstream player>> ), this requirement does not apply. **VIDEO** <ol><li>From your dashboard, click <a href="https://dashboard.jwplayer.com/#/content/list" target="_blank">Videos</a>.</li><li>Copy the ID from the **MEDIA ID** column. <br /> _If this column does not appear, click the gear icon** > Media ID**._</li></ol> **PLAYLIST** <ol><li>From your dashboard, click <a href="https://dashboard.jwplayer.com/#/playlists/list" target="_blank">Playlists</a>.</li><li>Click the name of a playlist.</li><li> On the **DEVELOPER** or **DEVELOPER RESOURCES** tab, copy the **Playlist ID**.</li></ol>

<br /> <hr />

## Embed a player

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

    

<br />

  1. 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.

    

<br />

  1. 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.

    

<br />

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

<br /> <hr />

## Additional settings

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

  • Contentual Article Matching

  • Search playlists

  • Content backfilling

Visit the <a href="https://amp.dev/documentation/components/amp-jwplayer/" target="_blank">JWP AMP component page</a> for more information about additional configuration settings or AMP.

<br />

<!-- Removes the automatic page-to-page navigation at the bottom of the page -->

<style> .rm-Pagination { display: none; } </style>