Here is the viral videos plugin with customized colors everywhere.
The configuration shown below defines the custom colors for the canvas,
buttons, labels and text fields. See the
Viral Videos plugin documentation for descriptions for these options.
HTML meta tags to share the player
When you share this page on certain social networks like Facebook, not only
a link back to this page is shared but also the player. This viral spreading
of the media itself is achieved by adding HTML meta attributes to your page.
Here are the HTML tags and attributes needed to share this page with the player:
Most of the above tags are self-explanatory. Some of them, like og:title, may be used
to override a page attribute for more specific use in media sharing.
We have two groups of meta tags with overlapping content. A network like MySpace needs
the group which is labeled 'old-fashioned', while Facebook and others prefer the
Open Graph protocol.
For Facebook and Open Graph it is recommended that you add these schemas to the html tag:
Find out more about Facebook's handling of Open Graph properties here.
Video meta tags
The tags responsible for sharing the player are: video_src, og:video,
og:video:secure_url. Their value is an URL pointing to the location of the
Flowplayer swf file with a query containing the player configuration:
Shared players are embedded by social networks using an OBJECT tag. The configuration
part therefore is formatted the same way as the flashvars parameter of the object tag and
must then be url-encoded as it is the query part of an URL.
Ensure that the URLs of the Flowplayer assets (logo, plugins etc.) in the configuration of the
og:video:secure_url tag resolve to a HTTPS location. Using HTTPS for all video locations
We recommend using an external configuration file because url-encoding even
a simple configuration is error-prone and hard to maintain. As you can only share one player
per page anyway - albeit from various locations - this is much easier as long as you stick
to a consistent naming scheme. Often the shared configuration will vary slightly from the
configuration of the player on the originating page, and then again a human-readable
configuration is easier to set up - as in this demo. Note however, that the
external configuration file used for sharing must be served from the same domain as the core
The external configuration file for sharing the player on this page can be found
here, and its HTTPS 'secure' version
Try the value of the video meta tags in action by entering them in your browser's location bar.
For this page just click on the following link which is the value of og:video:secure_url,
and the shared player will open in its own window: