Advanced Player Configurations

Flowplayer has great use cases supported out of the box but can be very extensively customized.

Documentation about customizing the player

The best sources to find out what Flowplayer can do is to review our extended documentation sections covering:

• Player skinning
• Player configuration
• Player API
• Demos

Overriding an iframe link

We always recommend you to use the player builder to properly configure your player as the starting point but if you need to make minor modifications programatically or manually we have added a few options to do that here. In case you want to make major modifications we suggest to instead use the JavaScript embed code.

Normally the iframe embed code look 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>

If you want to add custom parameters to this code programatically you need to add them to the embed.flowplayer.com URL.

We provide options to add the following parameters:

An example would look like this to force autoplay, mute and start 10 seconds into the video:

embed.flowplayer.com/api/video/embed.jsp?
     id=ddse9cb9d-b670-4453-a6bd-6c66e8d291e4&
     pi=3480668e-2322-4c18-b11a-92af07d07dd6&
     autoplay=true&
     mute=true&
     startTime=10&
     imageurl=http://domain.com/image.png

Customizing a player using the JavaScript embed

If you want to do extensive customizations of the player we recommend using JavaScript embed. 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>

There are extensive options to configure the player available for you to achieve even the most advanced use cases.