Embed a player on an AMP page

Learn how to add a player to a Google Accelerated Mobile Page (AMP) page

You can embed a JW Player 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.

RestrictionSolution
No unregistered content can be played.Only content registered with your JW Player 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 JW Player dashboard.
JW Player'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 JW Player's float-on-scroll functionality.


Requirements

ItemActions
Player ID1. From your player list page, click a player name.
2. From the URL, copy the alphanumeric player_key value.
3. 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:

1. From your player list page, click Create Player.
2. On the SETUP tab, name the player and set the Player Size.
3. Click Save.
4. From the URL, copy the alphanumeric player_key value.
5. 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 playeroutstream player - An ads-only video player designed to run over text article pages without requiring any video content ), this requirement does not apply.

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

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


Embed a player

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

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

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

  1. (Optional) In your JW Player 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 JW Player AMP component page for more information about additional configuration settings or AMP.


Updated 27 days ago



Embed a player on an AMP page


Learn how to add a player to a Google Accelerated Mobile Page (AMP) page

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.