Playlist Endscreen Plugin

In this topic, you will learn how to display a playlist at the end of a video. You can add this to a player either by using Video Cloud Studio or by using code with Brightcove Player.


The Playlist Endscreen plugin allows you to display a playlist when a video ends. This playlist can be related videos, using a smart playlist, or it can be videos unrelated to the main video.

End screen WILL appear End screen will NOT appear
  • A playlist ID is available AND
  • The plugin is enabled
  • No playlist ID is provided
  • The playlist ID is unset at runtime
  • The plugin is disabled

The user can also click on the end screen button in the UI to display the playlist end screen. The button tooltip uses the plugin title. In this case, the default, Related videos, is being used.

Playlist Endscreen button
Playlist Endscreen button


This example shows a playlist of related videos when the main video ends.

See the Pen Playlist Endscreen Plugin by Brightcove Learning Services (@bcls1969) on CodePen.

Using the CodePen

Here are some tips to effectively use the above CodePen:

  • Toggle the actual display of the player by clicking the Result button.
  • Click the HTML/CSS/JS buttons to display ONE of the code types.
  • Click the EDIT ON CODEPEN button in the CodePen and have the code available in one browser/browser tab.
    • In CodePen, adjust what code you want displayed. You can change the width of different code sections within CodePen.


The following requirements are needed to use the Playlist Endscreen plugin:

  • Brightcove Player v6.51.3 and newer

Implement using Players module

Playlist end screens can be implemented using Video Cloud Studio's Players module. For details, see the Configuring a Playlist Endscreen Using the playlist-endscreen Plugin document.

Implement using code

To implement a plugin the player needs to know the location of the plugin code, a stylesheet if needed, the plugin name and plugin configuration options. The location of the plugin code and stylesheet are as follows:

  1. Include the plugin code:
  2. Include the plugin styles:
  3. Use the plugin name to load it into the player: playlistEndscreen
  4. An example set of options is:

      playlistId: "5126480959001",
      title: "Watch More"
  5. Here is an example using the Advanced Embed implementation to associate the Playlist Endscreen plugin with a single instance of a player.

    <link href="" rel="stylesheet">
      <div style="max-width: 960px;">
      <video-js id="myPlayerID"
        data-account="your account ID"
        data-player="your player ID"
        data-video-id="your video ID"
    <script src=" account ID/your player ID_default/index.min.js"></script>
    <!-- script for the Playlist Endscreen plugin -->
    <script src=""></script>
    <!-- custom script -->
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        // initialize the Playlist Endscreen plugin 
          playlistId: "your playlist ID",
          title: "your title"


You may pass in an options object to the plugin upon initialization. This object may contain any of the following options:


  • The string representing the playlist ID to be displayed in the end screen.
  • Type: string
  • Default: ""
  • Value: "related" - As of version 1.1.0, the playlist endscreen plugin can display related videos instead of a specific playlist. Since this uses the playback api’s /related endpoint, the player must have a search enabled policy key.


  • The string to customize the end screen title, this will also modify the button tooltip.
  • Type: string
  • Default: "Related videos"


  • Determines if the published date is shown. Depending on thresholds may appear as a date or like 5 days ago.
  • Type: boolean
  • Default: false

The two possible publish time formats are shown in the following example:

publish time

Setting playlist ID

This plugin requires an ID for a playlist. The playlist will be fetched from the Playback API and the results will be used to populate the end screen. The playlist ID should come from one of the following sources:

  • Attribute on in-page embeds: data-endscreen-playlist-id="123456789"

  • Query string for iframes: &endscreenPlaylistId=123456789

  • Plugin option: player.playlistEndscreen({"playlistId": "123456789"})

    This can be added to the player configuration, or used at runtime, as in the example above.

  • Programmatic post-plugin-init: player.playlistEndscreen().setPlaylistId("123456789")


A playlist-endscreen-select event is triggered when a video is selected from the playlist. The following example shows the syntax:

myPlayer.on('playlist-endscreen-select', (e, data) => {
  videojs.log('User chose video ${} from video ${data.from}');


See the Playlist Endscreen Plugin Release Notes.