/ Web Player

How to embed our player

Our Players

We offer a few different ways to embed our players. Our HTML player is most recommended. It requires importing our CSS and JavaScript but also offers the most customization. iFrame or Stand Alone players just require a single line of HTML. oEmbed uses the URL to the public episode or series page to embed the player.

HTML Players

Overview

To embed an HTML player, follow these simple steps below:

Import our stylesheet by adding the code below inside the <head> section of your <html> page.

<link rel="stylesheet" type="text/css" href="https://web-player.art19.com/assets/current.css">

Import our script by adding this code at the end inside the <body> of your page.

<script type="text/javascript" src="https://web-player.art19.com/assets/current.js"></script>

Embed your player. The easiest way to do that is to sign in to your ART19 Series profile and copy the generated code from our embeddable player customization UI in the series or episode detail page. Continue to the next section below for documentation on how to do that manually.

Prerequisite
Your website must use HTML5. Follow the links below for more information:

CSS Overrides
We try our best to make sure our web-player styles are not overridden by other styles, but there is still a chance they will be overridden. If you find a design problem when embedding our players, please check with your web developer first to see if your website styles are causing an override. If your issues don't get resolved let us know, we will be glad to help.

Player Types

There are 3 player types to choose from. You can choose what fits best on your page.

Name	Class Name	Player Preview
Medium (Default)	`awp-medium`
Micro	`awp-micro`
Artwork	`awp-artwork`

To change a player from the default type, add your selected type to the class attribute next to art19-web-player in your player code. Example:

<div class="art19-web-player awp-micro" data-episode-id="ae2a9907-258b-470f-8bfd-c4b0aa2efbb7"></div>

Responsive Player
Note that all our players are responsive and mobile-friendly, so the layout will change depending on the screen size.

Embedding an episode player

In order to have a single player for an episode, add this to your page by replacing EPISODE_ID with your episode ID:

<div class="art19-web-player" data-episode-id="EPISODE_ID"></div>

Embedding a series player

To add a series player to your page, add the code below and by replacing SERIES_ID with your series ID:

<div class="art19-web-player" data-series-id="SERIES_ID" data-pick-from-series="latest" ></div>

Other configuration options are:

Data Attribute	Default Value	Description
`pick-from-series`	`undefined`	Can be `latest` which will only contain the latest episode or `playlist` which will show a playlist UI.
`playlist-rows`	`6`	Number of episodes to show in the playlist at a time.
`series-id`	`undefined`	The ID of the series to grab a playlist (or the latest episode) from.

Color Schemes

ART19 Web Player comes with 9 premade color schemes, which are:

Name	Class Name	Color Preview
Dark & Blue (Default)	`awp-theme-dark-blue`
Dark & Orange	`awp-theme-dark-orange`
Dark & Green	`awp-theme-dark-green`
Light & Blue	`awp-theme-light-blue`
Light & Orange	`awp-theme-light-orange`
Light & Green	`awp-theme-light-green`
Light Gray & Blue	`awp-theme-light-gray-blue`
Light Gray & Orange	`awp-theme-light-gray-orange`
Light Gray & Green	`awp-theme-light-gray-green`

To change a scheme from default, add your selected scheme to the class attribute next to art19-web-player in your player code. Example:

<div class="art19-web-player awp-theme-dark-green" data-episode-id="EPISODE_ID"></div>

Player Options

Configure the player options via data-attributes. The example below shows a custom primary color for a player:

<div class="art19-web-player" data-primary-color="#F60F60" data-episode-id="EPISODE_ID"></div>

Below is a list of all available configuration options.

Data Attribute	Description	Compatible Player Types
`ad-progress-color`	The color to be used for the advertisement progress bar.	All
`ad-skip-enabled`	If set to `false` skipping ads will not be allowed. Default is `true`.	All
`background-color`	The color to be used for the player background.	Micro
`border-enabled`	Can be `true` or `false` and determines whether the player has a border. Default is `true`.	All
`custom-id`	A custom identifier that can be passed through to 3rd-party ad servers. Must be a URL-encoded string no more than 512 characters in length. If provided, it is passed along as a custom_id query parameter to all episode requests.	All
`download-enabled`	If `true` or omitted, a download link will be available.	All
`embed-enabled`	Adds an embed button to the player that displays iFrame markup. Default value is `true` for all player types except micro. The embed overlay is not available for micro players in iframes.	All
`emit-events`	If set to `true` player events are emitted to the `art19Eventsattribute` on the root node (see Event Tracking ). Default is `false`.	All
`episode-title-template`	A URL-encoded string to customize episode titles as they appear in the player. Available macros include `{{episodeTitle}}`, `{{episodeNumber}}`, `{{seasonNumber}}` and `{{seasonTitle}}`.	Artwork, Medium
`primary-color`	The primary color used on controls.	All
`progress-color`	The color to use for regular playback progress. Defaults to selected color scheme.	All
`shadow`	Can be `true` or `false` and determines whether the player has a shadow. Default is `true`.	All
`share-enabled`	Show share button to allow sharing of the current episode. Default is `true`.	Artwork, Medium
`subscribe-enabled`	Show subscribe button for the series. Default is `true`.	Artwork, Medium

iFrame & Standalone

Overview

The simplest way to generate the code to embed for an iFrame or Standalone player is to sign in to your ART19 Series profile and copy the generated code from our embeddable player customization UI in series or episode detail page. Continue to next section for documentation on how to do that manually.

Player Types

There are 3 player types to choose from. You can choose what fits best on your page.

Name	Class Name	Player Preview
Medium (Default)	`awp-medium`
Micro	`awp-micro`
Artwork	`awp-artwork`

To change a player from the default type, add your selected type to the type parameter next to art19-web-player in your player code. As in the examples below:

iFrame

<iframe src="https://www.art19.com/shows/demo/embed?type=micro&playlist_type=latest" style="width: 100%; height: 40px; border: 0 none;" scrolling="no" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"></iframe>

Standalone
```
https://www.art19.com/shows/demo/embed?type=micro&playlist_type=latest
```
This is an example URL for the standalone player. The standalone player uses the same options as the iFrame player.

Embedding an episode player

To embed a player for a single episode, add this code to your page replacing SLUG with your series slug and EPISODE_ID with your episode ID:

<iframe src="https://www.art19.com/shows/SLUG/episodes/EPISODE_ID/embed" style="width: 100%; height: 200px; border: 0 none;" scrolling="no" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"></iframe>

Example:

<iframe src="https://www.art19.com/shows/demo/episodes/29616c73-969f-40fd-85cf-9cedece17b74/embed" style="width: 100%; height: 200px; border: 0 none;" scrolling="no" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"></iframe>

Embedding a series player

To add a series player to your page, add the code below and by replacing SERIES_SLUG with your series slug.

Latest

This player will just pull the latest episode.

<iframe src="https://www.art19.com/shows/SERIES_SLUG/embed?playlist_type=latest" style="width: 100%; height: 200px; border: 0 none;" scrolling="no" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"></iframe>

Example:

<iframe src="https://www.art19.com/shows/demo/embed?playlist_type=latest" style="width: 100%; height: 200px; border: 0 none;" scrolling="no" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"></iframe>

Playlist

This player will load all episodes in the series.

<iframe src="https://www.art19.com/shows/SLUG/embed?playlist_type=playlist" style="width: 100%; height: 505px; border: 0 none;" scrolling="no" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"></iframe>

Example:

<iframe src="https://www.art19.com/shows/demo/embed?playlist_type=playlist" style="width: 100%; height: 505px; border: 0 none;" scrolling="no" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"></iframe>

Player Options

Query Parameter	Description	Compatible Player Types
`custom_id`	A custom identifier that can be passed through to 3rd-party ad servers. Must be a URL-encoded string no more than 512 characters in length. If provided, it is passed along as a custom_id query parameter to all episode requests.	All
`episode_title_template`	A URL-encoded string to customize episode titles as they appear in the player. Available macros include `{{episodeTitle}}`, `{{episodeNumber}}`, `{{seasoneNumber}` and `{{seasonTitle}}`.	Artwork, Medium
`playlist_size`	Number of episodes to show in the playlist at a time. Only useful for a series player with `playlist_type=playlist`. The value can range from 3 to 10.	All
`playlist_type`	For a series player, this specifies whether to show a `playlist` or only the `latest` episode. Default is `playlist`.	All
`primary_color`	The primary color used on controls.	All
`stretch`	If set to `true`, the rendered player will try to horizontally stretch as far possible. Default is `false`.	All
`theme`	The color theme to use for the player (see above). Possible values are: `black`, `dark-blue`, `dark-orange`, `dark-green`, `dark-custom`, `light-blue`, `light-orange`, `light-green`, `light-custom`, `light-gray-blue`, `light-gray-orange`, `light-gray-green`, and `light-gray-custom`. Default is `dark-blue`.	All
`type`	The player-type to render. Possible values are `micro`, `medium`, and `artwork`. Default is `medium`.	All

oEmbed

ART19 is an oEmbed provider and Player.js provider through Embedly.

Embedding an episode player

An episode player can be embedded using the episode public page link, which can be found in the Episode page. To generated the link manually, replace SLUG with your series slug and EPISODE_ID with your episode ID:

https://www.art19.com/shows/SLUG/episodes/EPISODE_ID

Example:

https://www.art19.com/shows/demo/episodes/29616c73-969f-40fd-85cf-9cedece17b74

Embedding a series player

A series playlist player can be embedded using the series public page link, which is found in your Series profile. To generated the link manually, replace SLUG with your series slug:

https://www.art19.com/shows/SLUG

Example:

https://www.art19.com/shows/demo

Supported URL

https://art19.com/shows/*

https://art19.com/shows/*/episodes/*

Event Tracking

To listen for player events using the HTML player, set the data-emit-events attribute to true. You can bind to ART19 player events as follows:

// One may want to use jQuery to grab the player node
var node = document.querySelector('.art19-web-player[data-episode-id="..."]');
if (node != undefined) {
  var emt = node.art19Events;
  if (emt != undefined) {
    emt.on('play', function(data) {
      console.log('ART19 is now playing a great episode', data);
    })
  }
}

If the ART19 player is embedded through an iframe, you need to use Player.js to listen for events.

<script type="text/javascript" src="//cdn.embed.ly/player-0.0.11.min.js"></script>
// ...
<script type="text/javascript">
  var iframe = document.querySelector('#my-iframe');
  var player = new playerjs.Player(iframe);

  player.on('ready', function () {
    console.log('Player ready');

    document.querySelector('#play').addEventListener('click', function (evt) {
      player.play();
    });

    player.on(playerjs.EVENTS.PLAY, function () {
      console.log('Player started to play');
    });
  });
</script>

Events

The following section describes the events and their arguments.

download

The user clicked the download link for the current episode. The arguments provide the ID of the episode as well as the URL for the download.
```
{
  episodeId: '23b3694e-719e-4c3e-978c-ab211aea26ea',
  url: 'https://...'
}
```
ended

The current episode playback has ended
pause

The current episode playback got paused. This event has the following arguments
```
{
  position: <seconds>,
  duration: <seconds>
}
```
play

The current episode playback got started. This event has the following arguments
```
{
  position: <seconds>,
  duration: <seconds>
}
```
seeked

The playhead finished seeking to the given position
```
{
  position: <seconds>
}
```
seeking

The playhead is currently seeking
```
{
  position: <seconds>
}
```
share

The user is going to share the current episode through a social media channel. The event has the following arguments:
```
{
  episodeId: '5d09b9f0-a5bb-45dc-b317-4a078d234141',
  channel: 'Twitter',
  url: 'https://...'
}
```
The channel can be one of Twitter, Facebook, LinkedIn, or Email. All except Email have an url argument provided.
subscribe

The user tries to subscribe to the provided subscription link (usually the feed). The arguments provide both the episode-ID as well as the subscription link:
```
{
  episodeId: 'aa197cee-d1df-4b9b-994f-57261749f23e',
  url: 'pcast://...'
}
```
timeupdate

The playhead is moving while the episode is playing. The arguments provide more detail about the location of the playhead
```
{
  seconds: 15.43,
  duration: 3695.235
}
```

/ Web Player

How to embed our player

Our Players

HTML Players

Overview

Player Types

Embedding an episode player

Embedding a series player

Color Schemes

Player Options

iFrame & Standalone

Overview

Player Types

iFrame

Standalone

Embedding an episode player

Embedding a series player

Latest

Playlist

Player Options

oEmbed

Embedding an episode player

Embedding a series player

Supported URL

Event Tracking

Events

`download`

`ended`

`pause`

`play`

`seeked`

`seeking`

`share`

`subscribe`

`timeupdate`