This is a message.

Show interactive content blocks on top of the player

The content plugin is a general purpose tool to make different kinds of video applications.


You may want to use this plugin in the following scenarios:

  • Show captions.
  • Show descriptive text while the video plays.
  • Show advertisements.
  • Show a list of links at the end of the video where the user may want to go.
  • Display images that trigger JavaScript functions that can do many things.

You may find it useful to combine the content plugin with cuepoints so that you can show HTML content at various points of time during video playback.


  • Use the HTML language to layout text, images, links and even SWF files over or beside the video screen.
  • The HTML content can be styled with CSS. This CSS can be placed in an external file or it can be defined directly in the configuration.
  • Content can be placed inside a box that can be styled in many ways. You can set background colors, background images, have curved corners and tweak background gradient settings. The content background can also be transparent.
  • The content plugin can contain links that trigger JavaScript functions - in that way your content plugin can do almost anything.
  • The content can be animated just like any other plugin.
  • For JavaScript programmers this plugin exposes many useful methods such as setHtml, append, and provides event handlers like onMouseOver, onMouseOut and onClick.
  • You can have many content plugins configured at the same time as in our example above.


Here is a example configuration for the content plugin:

plugins: {
// "myContent" is the name of our plugin
myContent: {
// location of the plugin
url: 'flowplayer.content-3.2.9.swf',
// display properties
top: 20,
width: 300,
// styling properties
borderRadius: 10,
backgroundImage: 'url(pattern.png)',
// linked stylesheet
stylesheet: 'content-plugin.css',
// "inline" styling (overrides external stylesheet rules),
style: {
'.title': {
fontSize: 16,
fontFamily: 'verdana,arial,helvetica'
initial HTML content. content can also be fetched from the HTML document
like we did in the example above. see the source code for that.
html: '<img src="hello-world.png" align="left" />
<p class="title">My title</p>',
// clicking on the plugin hides it (but you can do anything)
onClick: function() {


The content plugin supports both display properties and styling properties like any other styleable plugin. Please follow the links to find out more information about them.

Here is a list of all content plugin specific configuration variables:



Specifies the initial HTML content for the plugin. Here is a list of supported HTML tags.


A value 'outline' causes a black outline to be used in the text font. This is useful when the background color of the content plugin is transparent and we want to make the text more visible on a light colored background. Especially useful when used with our captions plugin.


Path to the stylesheet file which specifies how each tag in the content is styled. You can find more information about styling here.


A styling object that is specified directly in the configuration. If an external stylesheet is in use, these settings override those external settings. You can find more information about styling here.


true displays a closing button at the top right corner of the plugin. The default is false.


A URL pointing to the image that is used as the closing button. Example: closeImage: url('close.png'). By default an X-like image is shown.

Look here for the JavaScript API documentation for more information about Plugin and Player instances.


Here are some scripting examples:

// first get access to the plugin using the getPlugin call
var plugin = $f("myDiv").getPlugin("myContent");
// after that you can use the standard plugin's methods
plugin.animate({top:30, width:'40%'});
// and you can use content plugin specific methods
plugin.append("<p>Some more HTML content</p>");


Plugin methods

You can find the list of standard Plugin methods such as animate and css here. Here is a list of the content plugin specific methods:




Set the plugin's HTML content to the given string. These HTML tags are supported. The current Plugin instance is returned.



Append more HTML content to the end of the existing HTML.



Returns the current HTML content.

Plugin events

The plugin also provides the following event handlers:



Called when the content plugin is clicked. The this variable points to the current Plugin instance and its only argument is a pointer to the current Player instance.


Called when the mouse is positioned over the plugin. The this variable points to the current Plugin instance and its only argument is a pointer to the current Player instance.


Called when the mouse moves outside of the plugin. The this variable points to the current Plugin instance and its only argument is a pointer to the current Player instance.

Supported HTML

The HTML which is supported by the content plugin is far less flexible and feature rich than the HTML supported by browsers. However, it is flexible enough for placing different types of content over video. The a, img, p and span HTML tags will be those mostly used with the content plugin. By combining those tags with class names and CSS styling you have a lot of different design possibilities.

Anchor tag <a>

Creates a hypertext link. Examples:

<!-- a link pointing to a specific url -->
<a href="">Acme website</a>
<!-- trigger JavaScript. huge possibilities! -->
<a href="javascript:getEmbedCode()">Get embed code</a>
<!-- open the page in a new browser window or tab -->
<a href="help.html" target="_blank">Player help</a>


You can also define a:link, a:hover, and a:active styles for the anchor tags. See the styling section later.

Image tag <img>

The <img> tag lets you embed external JPG, GIF and PNG files and even SWF files. Text automatically flows around images you embed in text fields or components. Supported attributes are: align with the values "left" or "right", width, height, hspace and vspace.

NOTE: For the image to be scaled both width and height need to be specified and be given in pixels. Percentage values are not supported.


<!-- place an image -->
<img src="my-image.png" />
<!-- align image to the right edge of the content plugin -->
<img src="my-image.png" align="right" />
<!-- remove image's default margins -->
<img src="my-image.png" vspace="0" hspace="0" />


Paragraph tag <p>

Creates a paragraph. Supported attributes are align with the values "left", "right" or "center" and class that specifies a CSS style class.

<!-- make a title. styled with CSS -->
<p class="title">This is a title</p>
<p align="right">right aligned paragraph</p>


Span tag <span>

This tag is usually used inside the p tag to highlight text with different CSS attributes. It is usually accompanied with a class attribute. Examples:

<!-- span.highlight is styled with CSS -->
This is an <span class="highlight">interesting</span> paragraph


Other tags

These tags are not so commonly used, but are fully supported:



Renders text as bold.


Creats a line break.


Specifies a font or list of fonts to display the text in. Supported attributes are color and face. It is recommended to use CSS for styling your text.


Displays the tagged text in italics. An italic typeface must be available for the font used.


Places a bullet in front of the text that it encloses. Ordered list <ol> and unordered list <ul> tags are not supported.

Styling with CSS

The content plugin supports a subset of the CSS standard for styling HTML tags. All principles are identical to common CSS coding practices. If you are not familiar with CSS you can find lots of good turorials on the net.

There are two ways of styling HTML tags: by specifying styling directly in the configuration (inline) or supplying an external CSS file. When specifying CSS directly in the configuration you must use the so-called camel case naming convention when defining CSS properties as well as quoting all string values. Notice how the CSS property font-size becomes fontSize (without quotes) in the inline configuration below. See the table below for a complete list of CSS properties and their camel case equivialents. Here is an example of inline styling:

style {
// "p.title" is not supported. you just have to write ".title"
'.title': {
fontSize: 16,
fontFamily: 'verdana'
'.highlight': {
color: '#339999',
fontWeight: 'bold'


And here is the corresponding styling in the external stylesheet. The syntax is the same as CSS files used in other web pages.

.title {
font-size: 16;
font-family: verdana;
span.highlight {
color: #339999;
font-weight: bold;


When specifying numeric values only the numeric part of the value is used. The units (px, pt) can be given but they are not parsed; pixels and points are equivalent. em is not supported.

Supported CSS properties

CSS propertyCamel caseUsage and supported values



Only hexadecimal color values are supported. Named colors (such as blue) are not supported. Colors are written in the following format: #FF0000.



Supported values are inline, block, and none.



A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used. If you specify a generic font name, it is converted to an appropriate device font. Example: 'Georgia, "Trebuchet MS", "Times New Roman", serif'.



Sets the size of a font.



Supported values are normal and italic.



Supported values are normal and bold.



The amount of space that is uniformly distributed between lines. The value specifies the number of pixels that are added after each line. A negative value condenses the space between lines.



The amount of space that is uniformly distributed between characters. The value specifies the number of pixels that are added after each character. A negative value condenses the space between characters.



Controls the size of the left margin of an element.



Controls the size of the right margin of an element.



Supported values are left, center, right, and justify.



Supported values are none and underline.



Indents the first line of text in an element.


Get latest version of the Flowplayer Content plugin.


just the working flash file to get you going

working flash file (swf) + README.txt and LICENSE.txt

source code

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

Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.

This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.

See the version history for this tool.

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.