You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

JavaScript plugin: Embed Let viewers place your videos on their sites

Quick Demo

Play video

Click the buttons on the right to see embedding in action.

(Version 3.0.3)

More demos

Here you can find more demos with both email and embedding features:

Features

  • You can provide a full configuration for the player and those customizations work on the embedded version. This includes skinning, clip settings, playlists and even plugins. Only event functions are not supported.
  • You can place embedding code anywhere on your page including textareas, tabbed panes, overlays or any DIV. Just call $f().getEmbedCode() and you're done.
  • You can either get a runnable version of the HTML code or a version that can be pasted as shown in the above example.
  • If your player has multiple clips in the playlist you can either embed the full playlist or just a selected clip.
  • The embedded object has the same width and height as the original player but those dimensions can be overridden in the configuration.
  • Commercial versions will also work because their product key is checked against the URL where the Flowplayer Flash component is loaded and not against the location where it is played. This means that people can embed your player into any domain and it will still work!

This tool uses flashembed 1.0.4 to generate the embedded code. The resulting HTML is one OBJECT tag as specified here.

A minimal setup

Here is the minimum code necessary to get embedding to work: 

<!DOCTYPE html>

<!-- include flowplayer specific files -->


<script src="http://static.flowplayer.org/js/flowplayer.embed-3.0.3.min.js"></script>


<!--  setup player with standard HTML syntax -->
<a
	href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
	style="display:block;width:400px;height:300px;float:left"
	id="player">
</a>

<!-- here is a textarea element where the embed code is placed -->
<textarea id="textarea"
	style="float:left;height:287px;margin:-1px 0 0 10px;overflow:hidden;width:320px;"></textarea>

<!-- stop floating (things are not side by side after this tag) -->
<br clear="all" />

<script>
// install Flowplayer inside the previous anchor tag
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");

// get the embedding code
var code = $f().embed().getEmbedCode();

// place this code in our textarea
document.getElementById("textarea").innerHTML = code;
</script>
Show this example as a standalone version. Grab its code for your own pages.

Usage

First you need a working player on the page. It can have any configuration you want. Here is one example: 

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {

	clip: {
		baseUrl: 'http://blip.tv/file/get'
	},

	playlist: [
		'KimAronson-TwentySeconds1318.flv',
		'N8inpasadena-Flowers457.flv'
	]
});

Next, we enable embedding for this player instance. After we have included the embedding JavaScript library on our page, we can simply do the following: 

// select first Flowplayer instance and enable embedding for it
$f().embed();

Now when we want to get the HTML code we can simply do following: 

// get embed code. that's it.
var embedCode = $f().getEmbedCode();

// here we place the embed code into a textarea using jQuery
$("textarea#embed").html(embedCode);

Configuration

Here are all the supported configuration options with their default values that you can specify for the embedding tool: 

.embed({
	// embedded player's width. by default this is the same as in the original player
	width: [player width],

	// embedded player's height. by default this is the same as in the original player
	height: [player height],

	// absolute URL for the flowplayer.swf. by default the URL is the same as for the original player
	url: [player URL],

	// if you just want to embed a single clip from the playlist. 0 means use the first clip
	index: -1
});

Here is one example configuration: 

$f("myPlayer").embed( {
	width: 400,
	height: 300,
	index: 0
});

Get the runnable code

You can get the runnable code just by supplying true for the getEmbedCode() function as seen in the example below. This is the exactly the same code except for the < and > characters which are not encoded so the code can be placed in the page and the player will run. 

// make a clone of the player and place it into an element whose id is 'test'
$("#test").html($f().getEmbedCode(true));

This functionality is especially useful for testing purposes.

Download

flowplayer.embed-3.0.3.js source code
flowplayer.embed-3.0.3.min.js minified with Douglas Crockford's minifier

Please right-click and choose "Save link as..." (or similar)

See the version history for this tool.

Found a bug?

If you encounter problems in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.