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 the end user clicks the embed icon by default the following HTML code is offered:

<a href="https://flowplayer.org/standalone/quickstart.html">Watch video!
<script>var w=window,d=document,e;w._fpes||(w._fpes=[],w.addEventListener("load",function(){var s=d.createElement("script");s.src="//embed.flowplayer.org/6.0.3/embed.min.js",d.body.appendChild(s)})),e=[].slice.call(d.getElementsByTagName("script"),-1)[0].parentNode,w._fpes.push({e:e,l:"",c:{"ratio":0.5625,"rtmp":0,"live":false,"origin":"https://flowplayer.org/standalone/quickstart.html","swf":"//releases.flowplayer.org/6.0.3/flowplayer.swf","swfHls":"//releases.flowplayer.org/6.0.3/flowplayerhls.swf","adaptiveRatio":false,"clip":{"subtitles":[],"sources":[{"src":"//stream.flowplayer.org/drive.webm","suffix":"webm","type":"video/webm"},{"src":"//stream.flowplayer.org/drive.mp4","suffix":"mp4","type":"video/mp4"}],"src":"https://stream.flowplayer.org/drive.webm","suffix":"webm","type":"video/webm","duration":68.004,"width":640,"height":360,"url":"https://stream.flowplayer.org/drive.webm","seekable":68.004,"time":0}}});
</script></a>

HTML

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 flowplayer is placed inside a SCRIPT tag - unless embed is configured to use an IFRAME - and upon page load the SCRIPT tag is replaced by the player.
  2. 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.
  3. The installation is minimal without splash screens or custom scripting. But if you want to embed an involved setup, again this can be done by offering an IFRAME.
  4. The script loads the Flowplayer script and CSS skin dynamically, but only if they are not already present on the embedding page.
  5. If Google Analytics is enabled the embedded players will also track to your Analytics account.
  6. Embedded players can be further embedded.

How it looks?

Watch video!

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';

JavaScript

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.

Configuration

Player options

The embedding extension provides the embed player option. The option can be applied in two ways, depending on the type of its specified value:

propertytypedescription
embedBooleanIf set to false, embedding is disabled.
embedObjectProvides all options to fine tune the embedding feature.

Disabling embedding

As a boolean embed is used to turn off off the embedding feature.

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

flowplayer.conf.embed = false;

JavaScript

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

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:

optiondefault valuedescription
heightHeight of embedded player. Default is responsive, but useful in conjunction with the iframe embed option.
iframeURL of IFRAME used for embedding.
library//releases.flowplayer.org/6.0.3/flowplayer.min.jsURL of the Flowplayer API library script.
playlistfalseWhether the current playlist is embedded or the current clip.
script//embed.flowplayer.org/6.0.3/embed.min.jsURL of the embed script.
skin//releases.flowplayer.org/6.0.3/skin/functional.cssURL of skin for embedding.
swf//releases.flowplayer.org/6.0.3/flowplayer.swfURL of SWF file for embedding.
swfHls//releases.flowplayer.org/6.0.3/flowplayerhls.swfURL of Flash HLS SWF file for embedding.
width100%Width of embedded player. Default is responsive, but useful in conjunction with the iframe embed option.

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"
}
};

JavaScript

Note: 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. Check out the quality selector demo, and try its embed code.

IFRAMEs are not responsive, therefore the embed width and height options default to width and height of the video.

  • Tip Configure an additional height of at least 3px to accomodate vertical space for the slim timeline below the player while the controlbar is hidden or for the controlbar height if the player has fixed controls, and on the IFRAME page add overflow: hidden CSS rules to avoid scrollbars around the embedded player.

In conjunction with HLS you should set both width and height explicitly to avoid dependence on the dimensions of the first resolution picked for playback.

See this demo and its embed result for details.

HTTPS

As you have no control where the player will be 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.

  • Important HTTP only embed offers are not reliable.

JavaScript API

Methods

The embedding extension provides the following API method:

methoddescription
embedCode()Returns the complete embed code offered by this player.
Note that this method therefore cannot return the API.

Social networks

Social networks do not allow application of arbitrary code on their platform. Therefore HTML5 video players cannot be shared - sharing differs fundamentally from embedding.

For instance Facebook's Open Graph meta tags permit links to Flash objects or video files, but not HTML5 video player code.

You can share your page so that instead of playing the video inline people will come to your site. If video sharing combined with a Flowplayer interface matters to you a lot we recommend using Flowplayer Flash.

And of course you can use Flowplayer HTML5 in Facebook page tab apps, like we do on our Flowplayer Facebook page.