Let's meet at Websummit 2022! Schedule an in-person demo of Flowplayer with or skilled Video Specialists! Learn more →

light background

Guides

Publishing videos

You can publish a video using an embed code for all videos uploaded to Flowplayer and all remote videos. To embed a video or livestream you need to select the video or livestream you want to embed and also make sure that you have a player configuration that you can embed the video or livestream within.

Once you have the video we provide the following ways to embed a video:

  • 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 video please take the following steps:

  1. Find the video or livestream
  2. Click the "Get Embed code" button
  3. Choose a player and options to embed the video
  4. Copy paste the embed code using either iframe or JavaScript
  5. Alternatively, send a share link by email / messenger.

The most important player settings are indicated by the following icons in the player selection dropdown:

autoplay when possible

start muted

loop the video clip

Embedding a video

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.

To learn more about advanced options to embed a Player using video files or streams outside of Flowplayer please see Publishing a player.

Embed a video or livestream using iframe

Using an iframe embed code is a standard way to embed videos and many video 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 and 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 video 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"
    }
  </script>
</div>

Additionally, you can copy a share link from the "Get Embed Code" dialog and send it by email or messenger.

Sharing a video

If you use a player configuration with host restrictions, you must allow ljsp.lwcdn.com in the host configuration in order to allow recipients to view the video.

Video analytics are available for videos hosted by us and for remote video assets, ie if they are registered in our system and you embed them using the platform src id . External videos without a Flowplayer src id cannot be tracked. Do not embed the video urls directly! If you embed with the pure Javascript embed, you must also load the platform integration plugin.