Sharing videos

You can share a video using an embed code or a share link for all videos uploaded to Flowplayer OVP 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:

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. 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=35abac67-087d-47e5-82aa-2d22c4a0241e&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 or livestream using JavaScript

If you want to work with the player programmatically, use the JavaScript embed. It gives you direct access to the player instance and to the full Player API.

The JavaScript embed code is an ESM embed and looks like this:

<div id="player-3afc64ea-fe85-456c-b9d7-6d1de8350ff2"></div>
<script type="module">
  import flowplayer from "https://embed.flowplayer.com/c5ad8e31-7bbe-441a-8c29-eaeca03ac6e1/3afc64ea-fe85-456c-b9d7-6d1de8350ff2.js";
  flowplayer("#player-3afc64ea-fe85-456c-b9d7-6d1de8350ff2", {});
</script>

The embed code is built from two IDs:

The embed code has the same format for videos and livestreams. Use the livestream's ID as the media ID.

What is an ESM embed?

ESM stands for ECMAScript modules, the standard JavaScript module system built into all modern browsers. A <script type="module"> can import code directly from a URL, without a separate <script src> tag or a build step.

The URL you import from is not a static file. The Flowplayer embed service generates a small module for this exact combination of player configuration and media. When the browser imports it, the module:

• loads the Flowplayer player in the release version set in your player configuration
• loads the platform integration plugin and every plugin your player configuration uses, so you don't need to add plugin scripts yourself
• carries the player configuration and the media information (sources, poster, title and, where required, the playback token)
• adds the Flowplayer stylesheet to the page if it isn't there yet
• exports a flowplayer() function that you call to create the player

Compared to the older async embed, an ESM embed:

• doesn't block page rendering: module scripts load in parallel and run only after the HTML has been parsed
• takes options as plain JavaScript: you pass an object to flowplayer() instead of writing JSON inside a <script> tag
• returns the player instance: you can use the Player API right away

Customizing the player

Any option you pass in the second argument overrides the player configuration for this embed. See configuration options:

<div id="player-3afc64ea-fe85-456c-b9d7-6d1de8350ff2"></div>
<script type="module">
  import flowplayer from "https://embed.flowplayer.com/c5ad8e31-7bbe-441a-8c29-eaeca03ac6e1/3afc64ea-fe85-456c-b9d7-6d1de8350ff2.js";

  const player = flowplayer("#player-3afc64ea-fe85-456c-b9d7-6d1de8350ff2", {
    start_time: 30,
    muted: true
  });

  player.on("playing", () => console.log("Playback started"));
</script>

Legacy async embeds

Older embed codes use the cloud-hosted async player script flowplayer.async.js and look like this:

<div data-player-id="9cd385cc-dd2b-4e85-9d11-9ab11c2b540f">
  <script src="//cdn.flowplayer.com/players/b6e0b310-9aa3-4f3b-9a30-cbbc3e9c04f3/native/flowplayer.async.js">
    {
      "src": "3afc64ea-fe85-456c-b9d7-6d1de8350ff2"
    }
  </script>
</div>

The embed code is built from three IDs:

Additional configuration options are added as JSON next to src inside the <script> tag.

To move to ESM embeds, uncheck use legacy JS embed code in the workspace settings and copy the new embed code from the Share video dialog. You can also build it yourself: the player configuration ID and the media ID go into the import URL, and the workspace ID isn't needed anymore.

CDN

All Flowplayer OVP video assets will be delivered through our Enterprise Content Delivery Network with worldwide points of presence.

Share a link

Additionally, you can copy a share link from the Share video dialog and send it by email or messenger.