Publishing a playlist

A playlist is published using an embed code. The embed code loads the Flowplayer video player with the playlist plugin in order to play the videos in the playlist in sequence. To embed a playlist you need to make sure that you have a player configuration that you can embed the playlist within.

We provide the following ways to embed a playlist:

• Iframe embed code
• JavaScript embed code

The preferred method is iframe embed since that is easiest to use and most common across the Internet.

In order to embed a playlist please take the following steps:

1. Go to the playlists view and select the playlist you want to embed.
2. Click the Get embed code button
3. Choose a player and options to embed the playlist
4. Copy paste the embed code using either iframe or JavaScript

If you cannot find a good player configuration to use in the third step please create a new player configuration that suits your specific requirements.

Embed a playlist using iframe

Using an iframe embed code is a standard way to embed media content and many services provide this as the only option. We recommend using iframe embeds unless you specifically need something else. This iframe embed provides you with the following advantages:

1. The code is easy to copy
2. The video player is isolated in its own “window” which prevents potential conflicts with other items on the page

The iframe embed code looks like this:

<div class="flowplayer-embed-container"
     style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width:100%;">
  <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
          webkitAllowFullScreen mozallowfullscreen allowfullscreen
          src="//embed.flowplayer.com/api/video/embed.jsp?id=ddse9cb9d-b670-4453-a6bd-6c66e8d291e4&pi=3480668e-2322-4c18-b11a-92af07d07dd6"
          title="0" byline="0" portrait="0"
          width="640" height="360"
          frameborder="0" allow="autoplay"></iframe>
</div>

The iframe embed link provide you with a few options to override the player configurations.

Using an iframe embed code limits the amount of interaction with the player since it resides in its own “window”. We always recommend to try to configure the player within our player builder as a first step since it contains a multitude of configuration options. However, if you want to access the player object directly in order to programmatically interact with it, or customize it more than what is provided using the iframe embed options, you should use the JavaScript embed code.

Embed a playlist using JavaScript

If you want to programmatically work with the video player the best option is to use the JavaScript embed. This allows you to interact with the video player and access the full Player API.

The JavaScript embed code looks like this:

<div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
  <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
    {
      "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba",
      "plugins": [ "playlist" ]
    }
  </script>
</div>