Embedding

Video embedding is an act where the viewers place your video on their site. Furthermore the audience on these foreign sites can do the same. The video can spread "like a virus". The terms "viral" and "viral marketing" originate from this concept. In Flowplayer this feature is enabled by default.

How it works?

When end user clicks the embed icon the following HTML code is offered:

<script src="//embed.flowplayer.org/5.4.6/embed.min.js"><div
      class="flowplayer" style="width: 624px; height: 260px;">
      <video>
         <source type="video/webm" src="http://mydomain.com/my-video.webm">
         <source type="video/mp4" src="http://mydomain.com/my-video.mp4">
         <source type="video/ogg" src="http://mydomain.com/my-video.ogg">
      </video>
</div></script>

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

1. The flowplayer is placed inside a script tag and upon setup the script tag is replaced by the player
2. The setup is minimal without splash screens or custom tweaks.
3. The script loads following files: jQuery, flowplayer.js, Google Analytics and flowplayer skin only if they are not present on the embedding page. They are loaded from trusted CDN‘s and cannot be modified by any party.
4. Player dimensions are taken from the video file or if not present the original player dimensions are used
5. If Google Analytics is enabled the embedded players will also track to your Analytics account
6. Embedded players can be further embedded

Custom logo and returning visitors

In the commercial version you can supply an absolute URL of your logo:

flowplayer.conf.logo = ‘http://mydomain.com/logo.png‘;

By default this will be displayed on bottom/left corner of the player in the embedded players. When user clicks the logo she will be redirected to the page where the video was originally. Note that the logo is not displayed on your site only on the embedded site. If you want to override this you must force it visible with CSS:

.flowplayer .fp-logo {
   display: block;
   opacity: 1;
}

Configuration

By default the embed feature loads the embed script and Flowplayer assets from our CDN. Since v5.4.1 this can be customized in the embed configuration object if you prefer to host the files yourself. Here is a list of all embed options:

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/minimalist.css",
      swf: "//mydomain.com/swf/flowplayer.swf"
   }
};

Note: The locations must not be paths but full URLs.

This way you can for instance propagate your own customized skin.

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. By contrast, the videos themselves are better delivered via http: as the secure protocol affects playback performance and may cause problems on older Android devices.

Disabling embedding

You can turn off the embedding feature completely with this boolean shorthand:

flowplayer.conf.embed = false;

Facebook

Currently Facebook does not support embedding of HTML5 video and thus Flowplayer cannot be directly embedded to Facebook. However you can share your page so that instead of playing the video inline people will come to your site. If direct embedding matters to you a lot we recommend using Flowplayer Flash.

Beware that direct embedding on Facebook is based on Flash and most mobile devices don‘t have Flash support. Due to enormous growth of mobile users we expect Facebook to look for HTML5 based solutions for embedding in near future.