Viral Videos plugin with different colors Flash plugins - Demo 13 / 14
Introduction
Here is the viral videos plugin with customized colors everywhere.
JavaScript coding
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.
$f("viral-colored", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
clip: {
autoPlay: false
},
plugins: {
// position and placement of the dock. The dock contains the buttons that
// are used to open the tabbed panes.
dock: {
// make it sit in the top/left corner
left: 15,
top: 15,
// make it horizontal
horizontal: true,
// make the width appropriate for vertical orientation
height: '20%'
},
viral: {
// load the viral videos plugin
url: 'flowplayer.viralvideos-3.2.5.swf',
// the Email, Embed and Share icons that are shown in the dock
icons: {
overColor: 'rgba(255,10,10,0.5)'
},
// Copy and Send email buttons
buttons: {
color: "rgba(47,69,45,1)",
overColor: "#96b096",
fontColor: '#122c10',
lineColor: '#2f452d'
},
// the overall colors and text field styling is defined for the canvas
canvas: {
backgroundColor: 'rgba(31,114,35,0.8)',
'.label': {
color: '#122c10',
fontWeight: 'bold'
},
// title texts
'.title': {
color: '#122c10',
fontWeight: 'bold'
},
// input text fields
'.input': {
color: '#bee0be',
backgroundColor: '#2f452d'
},
// the embed code text field
'.embed': {
color: '#bee0be',
backgroundColor: '#2f452d',
fontSize: 6,
fontWeight: 'normal'
}
},
// the close button used to close the plugin
closeButton: {
color: "rgba(47,69,45,1)",
overColor: 'rgba(255,0,0,0.5)'
}
}
},
// show the plugin right away
onLoad: function() {
this.getPlugin("viral").fadeIn();
}
});
Take a look at a standalone version of this demo. View its source code to get things going on your page.