Sharing

You want your videos to reach audiences beyond your own site? - No problem. Flowplayer features a share menu out of the box. With one click viewers can

  • share your videos on the Twitter and Facebook social networks
  • embed your videos in their own site

Let your videos go viral with Flowplayer!

Table of contents

Twitter

When the viewer clicks on the "twitter" icon in the share menu, the Twitter share window pops up. If confirmed, by default the video content is shared and played in the current Flowplayer setup, on Twitter.

Alternatively you can configure a share URL.

Facebook

When the viewer clicks on the "facebook" icon in the share menu, the Facebook share window pops up. If confirmed, by default the current page's URL will be shared on Facebook. Open Graph meta tags in the page's HEAD section will be evaluated and need to be set accordingly.

Note: Facebook, contrary to Twitter, so far does not allow sharing of HTML5 media players; therefore Facebook sharing is disabled by default.

Alternatively you can configure a share URL.

Embedding

When the end user clicks the "embed" icon in the share menu, the embed code is copied to the clipboard and the user notified of this fact.

This can be pasted into any website's source code, and the player will work in place. The embed code has the following features:

  1. The layout of the embedded player is responsive by default. The embedded player adapts its width to the parent element on the embedding page, and the height is determined by the value of original ratio option as recommended in the instructions for player size.
  • If Google Analytics is enabled the embedded players will also track to your Analytics account.
  • Embedded players can be further embedded.

How does it look?

The embed code taken from this player demo.

Custom branding and returning visitors

A commercially licensed player propagates the commercial configuration to draw traffic to your site.

If you configured your own logo it will be displayed in all embedded players:

flowplayer.conf.logo = '//mydomain.com/logo.png';

When the user clicks the logo she will be redirected to the originating page on your site. The same applies to the brand field in the controlbar if configured.

HTTPS

As you have no control where the player will be shared/embedded make sure that both the Flowplayer assets and the videos are accessible via HTTPS by configuring them independently of the access protocol.

If that is not possible because of differing locations for HTTP and HTTPS you must hard code the HTTPS locations to avoid errors.

HTTP only embed offers are not reliable.

Disabling sharing

To prevent your content from propagating simply set the share option to false.

For example you can prevent the embed offer for all players on the page in the global configuration:

flowplayer.conf.share = false;

The boolean version can also be applied in HTML syntax as data-share="false" to specific VIDEO tag based installations.

Configuration

Player options

On the player level sharing is governed by the following options:

    • property
    • description
    • embed boolean
    • If true (the default), the offered embed code will generate a player with your setup on the embedding page.
      If set to false, embedding is disabled, and the "embed" entry does not appear in the share menu.
    • embed object
    • If configured in JSON the embedded player setup can be customized or extended with embed options to fine tune the embedding feature.
    • facebook boolean
    • If false (the default), sharing to Facebook is disabled and the "facebook" entry does not appear in the share menu.
      If set to true, the current page will be shared on Facebook. If the page features appropriate Open Graph meta tags, video content will be shared accordingly.
    • facebook string
    • If configured as string, sets the URL of a page to share on Facebook. This page can feature Open Graph meta tags to share video content.
    • share boolean
    • If true (the default), sharing is enabled and the share menu is shown.
      If set to false, sharing is disabled entirely, and the share menu is not available.
    • twitter boolean
    • If true (the default), the video content and player setup will be shared on Twitter with a player card created on the fly.
      If set to false, sharing to Twitter is disabled, and the "twitter" entry does not appear in the share menu.
    • twitter string
    • If configured as string, sets the URL of a page to share on Twitter. This page can feature player card meta tags which will share the video accordingly.

Embed options

By default the embed feature loads the embed script and Flowplayer assets from our CDN. This can be customized in the embed configuration object if you prefer to host the files yourself.

When specified as object embed accepts the following properties:

    • option
    • description
    • height
    • Height of embedded player. Default is responsive, according to the embedded player's aspectRatio or ratiosettings.
    • library
    • URL of the Flowplayer API library script. Default: {{ config.flowplayer7.releases }}/{{ config.flowplayer7.version }}/flowplayer.min.js
    • script
    • URL of the embed script. Default: //embed.flowplayer.org/{{ config.flowplayer7.version }}/{{ config.flowplayer7.version }}/embed.min.js
    • skin
    • URL of the skin for embedding. Default: {{ config.flowplayer7.releases }}/{{ config.flowplayer7.version }}/skin/skin.css
    • swf
    • URL of SWF file for embedding. Default: {{ config.flowplayer7.releases }}/{{ config.flowplayer7.version }}/flowplayer.swf
    • swfHls
    • URL ofFlash HLS SWF file for embedding. Default: {{ config.flowplayer7.releases }}/{{ config.flowplayer7.version }}/flowplayerhls.swf
    • width
    • Width of embedded player. Default is responsive, filling the parent element's width. Default: 100%

  • -

The global configuration is a good place to configure embedding because it applies to all players on your page. Example:

flowplayer.conf = {
   embed: {
      library: "//mydomain.com/js/flowplayer.min.js",
      script: "//mydomain.com/js/embed.min.js",
      skin: "//mydomain.com/css/functional.css",
      swf: "//mydomain.com/swf/flowplayer.swf",
      swfHls: "//mydomain.com/swf/flowplayerhls.swf"
   }
};

The locations must not be paths but full URLs.

This way you can for instance propagate your own customized skin. Note: In this case make sure that the skin fonts are served with the appropriate cross-origin policy (CORS).

Ideally you want to make all required Flowplayer assets available via both the http: and https: protocols. As with the default locations this can be achieved by simply omitting the protocol from the URL - as long as the files are available at that location via both protocols. If not you should use a secure location because modern browsers become ever stricter when it comes to loading from insecure locations into a secure page.

Iframe embedding

Offering an IFRAME for embedding allows to propagate more involved setups.

To enable the embedded player to go fullscreen, the fullscreen and native_fullscreen player options must be set explicitly to true.

On the IFRAME page add overflow: hidden CSS rules to avoid scrollbars around the embedded player.

JavaScript API

Properties

    • property
    • description

This allows you to offer an embed code entirely tailored to your needs in a mini plugin:

flowplayer(function (api) {
  api.embedCode = function () {
    // your own embed code
    return '<div>My Embed Code</div>';
  };
});

Take the default embedCode function as inspiration.

Methods

The embedding extension provides the following API method:

    • method
    • description
    • embedCode()
    • Returns the complete embed code offered by this player.
      Note that this method therefore cannot return the API.
    • tweet()
    • Opens theTwitter share popup window for this player.
Results