This is a message.

Allow your videos to be embedded in other sites

Not just the video. The embedding plugin will allow you to customize the appearance of the embedded player.

Play video

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


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 license 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 to generate the embedding code. The resulting HTML is one OBJECT tag as specified here.

More demos

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

A minimal setup

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

<!-- player container-->
<a href="http://stream.flowplayer.org/flowplayer-700.flv" class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
id="player">
</a>
 
<!-- here is a textarea element where the embed code is placed -->
<textarea id="embedcode"></textarea>
<br class="clear"/>

HTML
// install flowplayer
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
 
// place embedding code to the textarea
document.getElementById("embedcode").innerHTML = $f().embed().getEmbedCode();

JavaScript

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.18.swf", {
 
clip: {
baseUrl: 'http://stream.flowplayer.org'
},
 
playlist: [
'KimAronson-TwentySeconds1318.flv',
'N8inpasadena-Flowers457.flv'
]
});

JavaScript

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();

JavaScript

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

JavaScript

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

JavaScript

Here is one example configuration:

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

JavaScript

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

JavaScript

This functionality is especially useful for testing purposes.

Download

flowplayer.embed-3.2.11.js

source code

flowplayer.embed-3.2.11.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.

NOTE We are no longer providing packed scripts. Although they may have smaller file size they offer less performance than minified scripts. See details from JavaScript Library Loading Speed.

Found a bug?

If you encounter problems with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.